Hi

Test

Hi
Nextrp [CPP] RU + Many GEOs Игра на карте России | NEXTRP

JQuery заменить все вхождения строки в HTML-странице

javascript jquery html replace

65762 просмотра

5 ответа

863 Репутация автора

Я работаю над проектом, где мне нужно заменить все вхождения строки другой строкой. Тем не менее, я хочу заменить строку, только если это текст. Например, я хочу включить это ...

<div id="container">
  <h1>Hi</h1>
  <h2 class="Hi">Test</h2>
  Hi
</div>

в...

<div id="container">
  <h1>Hello</h1>
  <h2 class="Hi">Test</h2>
  Hello
</div>

В этом примере все «Hi» были превращены в «Hello», за исключением «Hi» в качестве класса h2. Я пытался...

$("#container").html( $("#container").html().replace( /Hi/g, "Hello" ) )

... но это заменяет все вхождения "Привет" в HTML, а также

Автор: Calebmer Источник Размещён: 03.08.2014 09:24

Ответы (5)


1 плюс

9278 Репутация автора

//Get all text nodes in a given container
//Source: http://stackoverflow.com/a/4399718/560114
function getTextNodesIn(node, includeWhitespaceNodes) {
    var textNodes = [], nonWhitespaceMatcher = /\S/;

    function getTextNodes(node) {
        if (node.nodeType == 3) {
            if (includeWhitespaceNodes || nonWhitespaceMatcher.test(node.nodeValue)) {
                textNodes.push(node);
            }
        } else {
            for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                getTextNodes(node.childNodes[i]);
            }
        }
    }

    getTextNodes(node);
    return textNodes;
}

var textNodes = getTextNodesIn( $("#container")[0], false );
var i = textNodes.length;
var node;
while (i--) {
    node = textNodes[i];
    node.textContent = node.textContent.replace(/Hi/g, "Hello");
}

Обратите внимание, что это также будет соответствовать словам, где «Привет» является только частью слова, например, «Холм». Чтобы соответствовать только целому слову, используйте/\bHi\b/g

Автор: Matt Browne Размещён: 03.08.2014 09:39

0 плюса

6390 Репутация автора

здесь вы идете => http://jsfiddle.net/c3w6X/1/

var children='';

$('#container').children().each(function(){
    $(this).html($(this).html().replace(/Hi/g,"Hello")); //change the text of the children

    children=children+$(this)[0].outerHTML; //copy the changed child
});
var theText=$('#container').clone().children().remove().end().text(); //get the text outside of the child in the root of the element

$('#container').html(''); //empty the container

$('#container').append(children+theText.replace(/Hi/g,"Hello")); //add the changed text of the root and the changed children to the already emptied element 
Автор: Amin Jafari Размещён: 03.08.2014 09:40

17 плюса

174953 Репутация автора

Решение

Этот:

$("#container").contents().each(function () {
    if (this.nodeType === 3) this.nodeValue = $.trim($(this).text()).replace(/Hi/g, "Hello")
    if (this.nodeType === 1) $(this).html( $(this).html().replace(/Hi/g, "Hello") )
})

Производит это:

<div id="container">
    <h1>Hello</h1>
    <h2 class="Hi">Test</h2>
    Hello
</div>

Пример jsFiddle

Автор: j08691 Размещён: 03.08.2014 09:48

9 плюса

2354 Репутация автора

Хорошие результаты с:

function str_replace_all(string, str_find, str_replace){
try{
    return string.replace( new RegExp(str_find, "gi"), str_replace ) ;      
} catch(ex){return string;}}

и легче запомнить ...

Автор: Cyril Jacquart Размещён: 07.05.2015 09:15

7 плюса

7118 Репутация автора

 replacedstr = str.replace(/needtoreplace/gi, 'replacewith');

нужное место не должно округляться '

Автор: Saurabh Chandra Patel Размещён: 21.11.2015 05:48
Вопросы из категории :
32x32