9

我正在尝试在 jQuery 中编写一个替换函数，它将用 html 替换特定的单词。

基本上我试图在加载文档时替换类似的[this]东西。<span class='myclass'>我环顾四周寻找了几个样本，但我看到的几件事我无法开始工作。我仍在学习 jQuery，所以我希望有人可以给我一些建议作为尝试。

在此先感谢，史蒂文。

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>
4

3 回答 3

8

javascript replace() 返回一个新字符串，它不会改变原始字符串，所以它可能应该是：

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

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

这是一个小提琴

于 2012-07-03T21:10:45.787 回答
2

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

$(document).ready(function() {    
    // Using just replace
    var text = $('body').text();
    $("body").html(
        text.replace(/\[this\]/g,'<b>').replace(/\[\/this\]/g,'</b>')
    );
});
于 2012-07-03T21:06:50.167 回答
0

由于没有人解释用自定义 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);
    }
于 2020-04-27T11:28:53.873 回答