wrap word in span vanilla Javascript

Question

I have a funtion that return to me a list of word (with the previous and next qord). I am able to locate the word in the text correctly using a RegEx and knowing the previous and next word (so I find only one time the word and not all of the same). I am actually using the replace function of Javascript to wrap it inside a SPAN :

var re = RegExp("(?:^\\W*|(" + 
    motBefore.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + ")\\W+)" +
    motErreur.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "(?:\\W+(" +
    motAfter.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + ")|\\W*$)", "g");
document.getElementById('edth_corps').innerHTML =
    document.getElementById('edth_corps').innerText
        .replace(re, motBefore + " " + '<span id="' + nbId +
        '" class="erreurOrthographe" ' +
        'oncontextmenu="rightClickMustWork(event, this);return false"> '
        + motErreur + '</span>' + " " + motAfter);

But the fact is that because I am placed on the group of these three word, I have to give him back the word before and after.

The issue I got with this tech is that I loose all punctuation and the more important , if there is a font tag (or bold, italic, underline) I loose them.

I'd like to wrap around this word a span like it is the child of the current node where this word is without touching the previous and next word (they are suposed to be here so we have the right word and not another occurence of this word).

But I have no idea how to do it since I can only use old Javascript (IE compiler is set to compatibily mode for IE5, and this function is the only one I can't manage to rewrite for this version). I can't use library such a Jquery (I have seen a lot of solution with this plug in).

Could someone point me in the right direction ? Could an insertBefore work even if the Error Word has no parent around him but is only part of a sentence ?

Can't I identify the parent tag with the search I do with the regEx then wrap a tag aroun this word without changing the position ? with and insertBeofre or another kind of insert ? — Slayner
– Slayner, Commented Jan 20, 2016 at 12:46
@JackA. but the wrod-wrap function seems to be only there so you can break a word if it is too long, no wrap it around a span — Slayner
– Slayner, Commented Jan 20, 2016 at 14:47
@JackA.when I use my function I can locate the word I need to wrap with a span (motErreur) but I have to give him the before and after word. What I would like is to just wrap the motErreur in span and give him as a child node without changing is position, like this if he is in the middle of the sentence he don't move, and if he is wrap already with like a bold tag, the span tag will became a child of this bold tag — Slayner
– Slayner, Commented Jan 20, 2016 at 16:11
Sorry, I totally misunderstood your question. Using innerText will definitely cause you to lose markup. I did something similar to this using the TextRange object (msdn.microsoft.com/en-us/library/ms535872(v=vs.85).aspx) a long time ago. I'll see if I can dig up the code when I get home tonight. — Jack A.
– Jack A., Commented Jan 20, 2016 at 17:55

Jack A. · Accepted Answer · 2016-01-21 04:08:26Z

1

This isn't a complete answer, but hopefully it will be useful. You can use the TextRange object in IE to modify the text in an element. This is similar to the W3C Range object, but it is supported by old versions of IE. Using this object, you can select text, find text, and modify the text.

Finding the desired text will be the tricky part, but once you've found it and selected it in a range, it is easy to modify the HTML.

As a simple example, I created a Fiddle that finds a string in a div and surrounds it with a span:

var findString = "JavaScript";
var content = document.getElementById("content");
var textRange = document.body.createTextRange();
textRange.moveToElementText(content);
if (textRange.findText(findString)) {
  var html = "<span class='selected'>" + findString + "</span>";
  textRange.pasteHTML(html);
}

Hope this helps.

answered Jan 21, 2016 at 4:08

Jack A.

4,5631 gold badge28 silver badges38 bronze badges

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

3 Comments

Slayner Over a year ago

Thanks for you answer, I am going to try it, using the RegEx I have I can find the global range then maybe use your answer to modify only the right word and not the word around him. I'll let you know how this worked for me.

Slayner Over a year ago

Okay it's working greatly what you give to me, I have trouble integrating him with the regex I got but will keep working around what you gave me.

Slayner Over a year ago

I just need to figure how to retrieve the parent Node with my RegEx and IE5 and It will be perfect I think

Collectives™ on Stack Overflow

wrap word in span vanilla Javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related