Question

我有多个h2标签，每个标签都包含文字，并且有一个名为data-options的自定义属性。此属性有多个以逗号分隔的选项，其中一个选项是h2标记文本本身。

HTML：

<h3 id='test' data-options='happy,sad,fantastic'>sad</h3>
<h3 id='test2' data-options='1,2,3,4'>3</h3>

jQuery的：

var indexArray = ['happy','1'];
$('h3').each(function(i){
    var $this = $(this),
        value = $this.text(),
        code = $('body').html();

    code = code.replace(value, indexArray[i]);
    $('body').html(code);
});

这就是我的期望：

<h3 id='test' data-options='happy,sad,fantastic'>happy</h3>
<h3 id='test2' data-options='1,2,3,4'>1</h3>

相反，我得到了这个：

<h1 id="test" data-options="happy,happy,fantastic">sad</h1>
<h3 id="test2" data-options="1,2,3,4">3</h3>

正如您所看到的，脚本会更改它遇到的第一个文本，而不是标记内的文本。

这是脚本的工作演示：http://jsfiddle.net/fs1sfztx/

Answer 1

除非您正在搜索，否则进行替换是没有意义的。这意味着您必须提供搜索内容以及替换内容。到目前为止，只给出了h3中的文字。

假设indexArray中的每个索引都与每个h3元素的索引匹配，那么您可以将当前indexArray元素indexArray[i]与相应的每个字词进行比较元素data-options属性。匹配时，将innerText道具设置为该词。

var indexArray = ['happy','1'];
$('h3').text( function( i, txt ) {
    var that = $(this);
    var ntxt = txt;
    $.each( that.data('options').split(','), function( j, u ) {
        indexArray[i] !== u || (ntxt = u);
    });
    return ntxt;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 id='test' data-options='happy,sad,fantastic'>sad</h3>
<h3 id='test2' data-options='1,2,3,4'>3</h3>

如果您只想使用replace方法，那么您可以使用以下内容：

var indexArray = ['happy','1'];
var allhtml = $('body').html();
$('h3').each( function( i ) {
    var txt = $(this).text();
    var re = new RegExp( '>' + txt + '<', 'g' );
    allhtml = allhtml.replace( re, '>' + indexArray[i] + '<' );
});    
$('body').html( allhtml );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 id='test' data-options='happy,sad,fantastic'>sad</h3>
<h3 id='test2' data-options='1,2,3,4'>3</h3>

如何仅在标记之间替换文本

1 个答案: