Machen Sie einen Text fett und einige kursiv

Question

Von this question Ich habe den Code, um Text zu finden, wickeln Sie es ein, und machen Sie es fett, was funktioniert (ich verwendete Jahu's answer, die mit einem jsbin). Wenn ich es in eine andere Datei kopiere und ändere, um den Text kursiv zu machen, funktioniert es.

Allerdings, wenn ich die beiden in der gleichen Datei (auch in verschiedenen <script> Tags) nur die fetteste passiert. Wer weiß warum?

$.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>

Answer 1

Die Art und Weise implementiert wurde verhindert, dass Sie mehrere Tags in einer Sequenz zu ändern, weil der Inhalt in Text umgewandelt wurde das Element.

Hier ist, was ich getan habe:

// 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); 

Wie es laufen:

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

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

die Arbeitsversion Siehe hier: http://jsbin.com/xamisohehi/edit?html,js,output