Make some text bold AND some italic

Question

From this question I got the code to find text, wrap it in, and make it bold, which works (I used Jahu's answer, the one with a jsbin). When I copy it to another file and change it to make the text italic, it works.

However, when I put the both of them in the same file (even in different <script> tags) only the bold one happens. Anyone know why?

$.fn.wrapBoldTag = function(opts) {
  // https://stackoverflow.com/a/1646618
  function getText(obj) {
    return obj.textContent ? obj.textContent : obj.innerText;
  }
  var tag = opts.tag || 'strong',
    words = opts.words || [],
    regex = RegExp(words.join('|'), 'gi'),
    replacement = '<' + tag + '>$&</' + tag + '>';

  // https://stackoverflow.com/a/298758
  $(this).contents().each(function() {
    if (this.nodeType === 3) //Node.TEXT_NODE
    {
      // https://stackoverflow.com/a/7698745
      $(this).replaceWith(getText(this).replace(regex, replacement));
    } else if (!opts.ignoreChildNodes) {
      $(this).wrapBoldTag(opts);
    }
  });
};
$('p').wrapBoldTag({
  "words": ["blue"]
});
$('p').wrapBoldTag({
  "words": ["edit"],
  "ignoreChildNodes": true
});

$.fn.wrapInTag = function(opts) {
  var tag = opts.tag || 'strong',
    words = opts.words || [],
    regex = RegExp(words.join('|'), 'gi'),
    replacement = '<' + tag + '>$&</' + tag + '>';

  return this.html(function() {
    return $(this).text().replace(regex, replacement);
  });
};
$('p').wrapInTag({
  tag: 'u',
  words: ['sky']
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>The sky is blue.</p>

There's probably something wrong with the code you didn't post. — Alexander O'Mara, Jun 05 '16 at 23:28
According to the code example you posted, only the italics is done. — gunr2171, Jun 06 '16 at 14:39
I'm sorry about that, I thought that referring to the post I was talking about was enough. User Filype answered my question, but I will definitely remember to always include my own code in the future... — user6428096, Jun 06 '16 at 14:41

score 2 · Accepted Answer · answered Jun 05 '16 at 23:43

The way it was implemented prevents you from changing multiple tags in a sequence because the element's content was converted into text.

Here's what I have done:

// stips out tags, which causes issues when onverting 2 tags
// return $(this).text().replace(regex, replacement);
// use the html contents of the element
return $(this).html().replace(regex, replacement);

How it's run:

$('p').wrapInTag({
  tag: 'em',
  words: ['world', 'red']
});

$('p').wrapInTag({
  tag: 'strong',
  words: ['is']
});

See the working version here: http://jsbin.com/xamisohehi/edit?html,js,output

Make some text bold AND some italic

1 Answers1