使用jQuery将纯文本替换为HTML

Question

我正在尝试编写一个jQuery的replacewith函数，用于将特定单词替换为html。基本上，我想在文档加载时将类似于[this]的内容替换为<span class='myclass'>。我查看了一些示例，但是我无法使其中的一些东西工作。我仍在学习jQuery，希望有人能给我一些建议。谢谢您提前的帮助，Steven。

HTML/文本：

[this]hello world![/this]​

JavaScript：

$(document).ready(function() {    
     // Using just replace
     $("body").text().replace(/[this]/g,'<b>')
});​

--编辑--

我使用Nir的演示对函数进行了一些更改。

以下是关于我的操作的更多详细信息。我正在尝试制作一个内联分数，我已经有适当的类和其他必要的元素。它在html中运行良好，但是当我运行jQuery函数时，它似乎无法正常工作。

很明显标签被替换了，但是我的css似乎并没有像我之前提到的那样起作用。

这里是HTML的链接 HERE

这里是jsfiddle的链接 HERE

$(document).ready(function() {    

// Using just replace
var text = $('body').text();
$("body").html(text.replace(/\[math\]/g,'<span class="container">').replace(/\[\/math\]/g,'</span>'));

var textt = $('body').text();
$("body").html(textt.replace(/\[top\]/g,'<div class="containme">').replace(/\[\/top\]/g,'</div>'));

var textl = $('body').text();
$("body").html(textl.replace(/\[line\]/g,'<div class="borderme">&nbsp;</div>'));

var textb = $('body').text();
$("body").html(textb.replace(/\[bot\]/g,'<div class="containme2">').replace(/\[\/bot\]/g,'</div>'));
 });​

这是HTML

 <span class="readme">Whats up, here's a fraction.&nbsp;
<span class="container">
    <div class="containme">1</div>
    <div class="borderme">&nbsp;</div>
    <div class="containme2">2</div>
    </span>
 &nbsp;&nbsp;Hello? Whats up, here's a fraction.&nbsp;
    <span class="container">
    <div class="containme">1</div>
    <div class="borderme">&nbsp;</div>
    <div class="containme2">2</div>
  </span>
  &nbsp;&nbsp;Hello? Whats up, here's a fraction.&nbsp;
  </span>

转换为这种简短的标记

<span class="readme"> Whats up, here's a fraction. [math][top]1[/top][line][bot]2[/bot][/math] </span>

- xxstevenxo

---

你要查找的字符串会如何影响预期输出？你只是插入了一个开放标签吗？那么对于插入的元素，闭合标签呢？ - David Thomas

(a) 你没有设置你的fiddle来使用jQuery (b) .replace返回一个新字符串：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace - Felix Kling

Answer 1

javascript的replace()方法返回一个新的字符串，不会修改原始字符串，因此应该改为：

$(document).ready(function() {    
    var content = $("body").text().replace(/\[this\]/g,'<b>')
    $("body").html(content);
});​

请注意，括号必须被转义，否则它将用 <b> 替换括号内的每个字符。

这里有一个范例。

- adeneo

---

为了避免在您提供的链接中进行第二次replace()操作，这里有一个稍微更新过的JS Fiddle: 链接。 - David Thomas

这是一个很棒的演示，非常感谢。我会对我的原始帖子做一些编辑。在看到您之前，我尝试了Nic的答案，它确实替换了我需要的内容，但似乎我的CSS没有正常工作。你可以看一下这个演示，给我一些建议吗？http://jsfiddle.net/stevenschemers/juTtG/28/ - xxstevenxo

Answer 2

这里有一个使用正则表达式的演示：

$(document).ready(function() {    
    // Using just replace
    var text = $('body').text();
    $("body").html(
        text.replace(/\[this\]/g,'<b>').replace(/\[\/this\]/g,'</b>')
    );
});

- Nir

---

请不要只提供解决方案的链接，还请在您的回答中包含代码。如果链接因任何原因无法访问，那么您的“答案”将变得无用。 - Felix Kling

谢谢你提供的演示。我添加了几行代码，试图完成我想做的功能，但似乎出了问题 :| 你介意看一下这个fiddle吗？http://jsfiddle.net/stevenschemers/juTtG/24/ - xxstevenxo

我更新了我的原帖，提供了更多关于我实际想要完成的信息。谢谢你的帮助。 - xxstevenxo

Answer 3

由于没有人解释如何使用自定义 HTML 元素替换文本，现在我使用下一个函数：

replaceWithAnchor: function (el, text) {
        let anch = $('<span>');
        anch.attr('id', `my-link-1`);
        anch.text(text);

        var content = el.html().replace(text, '<span id="need-to-replace"></span>');
        el.html(content);
        el.find('#need-to-replace').replaceWith(anch);
    }

- Олег Хитрень