Javascript/jquery - Wrap text with tag at specific position

Question

I have some text:

<p>hello world. This is a test paragraph.</p>

I want to add an  tag at start positions and  at end positions giving us:

<p>
  <em>hello</em> world. This is a <em>test</em> paragraph.
</p>

I have a list of start and end positions

<lst name="offsets">
  <int name="start">0</int>
  <int name="end">5</int>
  <int name="start">22</int>
  <int name="end">27</int>
</lst>

Is there an easy way of doing this?

Here is how I did it (slight modification of the answer):

var p = doc+=" "//document.querySelector("#content"),//I added a space to the end of the document because if we try to wrap the em tags around the word we are looking for and it is at the end of the document then it gives us undefined.
    textArray = p.split('');
    //offsets = [{ start: 0, end: 5 }, { start: 22, end: 27 }];

    offsets.forEach(function (offset) {    
    textArray[offset.start] = '<em>' + textArray[offset.start];
    textArray[offset.end] = '</em>' + textArray[offset.end];
});

document.querySelector("#content").innerHTML += textArray.join('');
document.querySelector("#content").innerHTML += "<hr>";

So you want to add a tag at column indicated inside element with name "start" of every element? In this case, column 2289? — Gonzalo
– Gonzalo, Commented Nov 23, 2015 at 19:41
Also I can simply get the element and get its text. From there I want to edit the text and add the tags — Kevin
– Kevin, Commented Nov 23, 2015 at 19:52

Josh Crozier · Accepted Answer · 2015-11-23 21:11:08Z

6

Here is a simple example that doesn't require jQuery.

Example Here

Start with an offset array of objects to determine the start/end values.

[
  { start: 0, end: 5 },
  { start: 22, end: 27 }
]

Then iterate over the offset array:

var p = document.querySelector('p'),
    textArray = p.innerText.split(''),
    offsets = [{ start: 0, end: 5 }, { start: 22, end: 27 }];

offsets.forEach(function (offset) {    
    textArray[offset.start] = '<em>' + textArray[offset.start];
    textArray[offset.end] = '</em>' + textArray[offset.end];
});

p.innerHTML = textArray.join('');

<p>hello world. This is a test paragraph.</p>

If you would like to parse the list elements in order to create the offset array:

Example Here

var p = document.querySelector('p'),
    textArray = p.innerText.split(''),
    offsets = [];

Array.prototype.forEach.call(document.querySelectorAll('lst > int[name="start"]'), function (el) {
    offsets.push({start: el.innerText, end: el.nextElementSibling.innerText});
});

offsets.forEach(function (offset) {    
    textArray[offset.start] = '<em>' + textArray[offset.start];
    textArray[offset.end] = '</em>' + textArray[offset.end];
});

p.innerHTML = textArray.join('');

<p>hello world. This is a test paragraph.</p>

<lst name="offsets">
  <int name="start">0</int>
  <int name="end">5</int>
  <int name="start">22</int>
  <int name="end">27</int>
</lst>

edited Nov 23, 2015 at 21:11

answered Nov 23, 2015 at 20:26

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kevin Over a year ago

This actually has a problem when the text we are wrapping with is at the end, I get an undefined because the character array is of a length and it tries to add the + textArray[offset.end] thus being nothing and giving us the undefined. I solved it (rather dirty fix) by adding a space to the end of the document. I have added my code as an edit to the original question.

bendecko Over a year ago

Nice solution. Testing if (textArray[offset.end] ? textArray[offset.end] : '') will sort the Undefined problem.

PeterKA · Accepted Answer · 2015-11-23 20:05:27Z

1

Would it be better to list the particular words you want to change?

var arr = ["hello", "test"];
$('p').html(function(i,html) {
    return html.split(/\s+/).map(function(u,j) {
        return arr.indexOf(u) > -1 ? '<em>' + u + '</em>' : u;
    })
    .join(' ');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
hello world. This is a test paragraph.
</p>

answered Nov 23, 2015 at 20:05

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Comments

ak_ · Accepted Answer · 2015-11-23 20:49:28Z

You can loop over the <lst> you've provided like this:

//as we insert tags, the length of our string will change.  we need a counter and an offset to track that
var counter = 0;

//loop over each start tag in the list
$('lst[name="offsets"] int[name="start"]').each(function() {

    //get the start tag
    var startValue = $(this);
    //get the next tag, the end tag
    var endValue = startValue.next();
    //convert the start tag's text to an int
    var startInt = parseInt(startValue.text());
    //convert the end tag's text to an int
    var endInt = parseInt(endValue.text());

    //load the paragraph's html
    var str = $('p').html();

    //offset length of inserted string, e.g. "<em></em>" means 9 characters are insearted each time this loop runs
    var offsetOpen = (counter * 9); 
    //offset the closing tag by the length of the start tag
    var offsetClose = offsetOpen + 4; 

    //insert the start tag at the right position
    $('p').html([str.slice(0,startInt + offsetOpen), "<em>", str.slice(startInt + offsetOpen)].join(''));

    str = $('p').html();

    //insert the closing tag at the right position
    $('p').html([str.slice(0,endInt + offsetClose), "</em>", str.slice(endInt + offsetClose)].join(''));

    //increment the counter
    counter++;

});

You can see it working at this JS Fiddle:

https://jsfiddle.net/jqzrovoh/3/

Hope that helps!

Collectives™ on Stack Overflow

Javascript/jquery - Wrap text with tag at specific position

3 Answers 3

2 Comments

Comments

https://jsfiddle.net/jqzrovoh/3/

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related