jQuery 查找和替换字符串

发布于 2024-10-19 07:33:32 字数 917 浏览 3 评论 0原文

我在网站上的某个地方有一个特定的文本，比如说“lollypops”，我想用“marshmellows”替换所有出现的该字符串。问题是我不知道文本到底在哪里。我知道我可以这样做：

$(body).html($(body).html().replace('lollypops', 'marshmellows'));

这可能会起作用，但我需要重写尽可能少的 HTML，所以我想这样：

搜索字符串
找到最接近的父元素
仅重写最接近的父元素
替换它即使在属性中，但不是全部，例如在 class 中替换它，但不在 src 中替换它

例如，我会有这样的结构

<body>
    <div>
        <div>
            <p>
               <h1>
                 <a>lollypops</a>
               </h1>
            </p>
            <span>lollypops</span>
        </div>
    </div>
    <p>
       <span class="lollypops">Hello, World!</span>
       <img src="/lollypops.jpg" alt="Cool image" />
    </p>
<body>

在这个例子中，每次出现“ lollypops" 将被替换，只有

原文

I have somewhere on website a specific text, let's say "lollypops", and I want to replace all the occurrences of this string with "marshmellows". The problem is that I don't know where exactly the text is. I know I could do something like:

$(body).html($(body).html().replace('lollypops', 'marshmellows'));

This would probably work, but I need to rewrite as little HTML as I can, so I'm thinking something like:

search for the string
find the closest parent element
rewrite only the closest parent element
replace this even in attributes, but not all, for example replace it in class, but not in src

In example, I would have structure like this

<body>
    <div>
        <div>
            <p>
               <h1>
                 <a>lollypops</a>
               </h1>
            </p>
            <span>lollypops</span>
        </div>
    </div>
    <p>
       <span class="lollypops">Hello, World!</span>
       <img src="/lollypops.jpg" alt="Cool image" />
    </p>
<body>

In this example, every occurrence of "lollypops" would be replaced, only <img src="... would remain the same and the only elements that would actually be manipulated would be <a> and both <span>s.
Does anybody know how to do this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

未央 2024-10-26 07:33:32

您可以这样做：

$("span, p").each(function() {
    var text = $(this).text();
    text = text.replace("lollypops", "marshmellows");
    $(this).text(text);
});

最好用需要使用合适的类名检查的文本来标记所有标签。

此外，这可能会带来性能问题。 jQuery 或 javascript 一般来说并不适合这种操作。你最好在服务器端进行。

You could do something like this:

$("span, p").each(function() {
    var text = $(this).text();
    text = text.replace("lollypops", "marshmellows");
    $(this).text(text);
});

It will be better to mark all tags with text that needs to be examined with a suitable class name.

Also, this may have performance issues. jQuery or javascript in general aren't really suitable for this kind of operations. You are better off doing it server side.

回复收藏 0 原文

懷念過去 2024-10-26 07:33:32

你可以这样做：

$(document.body).find('*').each(function() {
    if($(this).hasClass('lollypops')){ //class replacing..many ways to do this :)
        $(this).removeClass('lollypops');
        $(this).addClass('marshmellows');
    }
    var tmp = $(this).children().remove(); //removing and saving children to a tmp obj
    var text = $(this).text(); //getting just current node text
    text = text.replace(/lollypops/g, "marshmellows"); //replacing every lollypops occurence with marshmellows
    $(this).text(text); //setting text
    $(this).append(tmp); //re-append 'foundlings'
});

例如： http://jsfiddle.net/steweb/MhQZD/

You could do something this way:

$(document.body).find('*').each(function() {
    if($(this).hasClass('lollypops')){ //class replacing..many ways to do this :)
        $(this).removeClass('lollypops');
        $(this).addClass('marshmellows');
    }
    var tmp = $(this).children().remove(); //removing and saving children to a tmp obj
    var text = $(this).text(); //getting just current node text
    text = text.replace(/lollypops/g, "marshmellows"); //replacing every lollypops occurence with marshmellows
    $(this).text(text); //setting text
    $(this).append(tmp); //re-append 'foundlings'
});

example: http://jsfiddle.net/steweb/MhQZD/

回复收藏 0 原文

月下伊人醉 2024-10-26 07:33:32

你可以这样做：

HTML

<div class="element">
   <span>Hi, I am Murtaza</span>
</div>

jQuery

$(".element span").text(function(index, text) { 
    return text.replace('am', 'am not'); 
});

You could do something like this:

HTML

<div class="element">
   <span>Hi, I am Murtaza</span>
</div>

jQuery

$(".element span").text(function(index, text) { 
    return text.replace('am', 'am not'); 
});

回复收藏 0 原文

偏爱你一生 2024-10-26 07:33:32

下面是我用彩色文本替换一些文本的代码。很简单，获取文本并将其替换为 HTML 标记。它适用于该类标签中的每个单词。

$('.hightlight').each(function(){
    //highlight_words('going', this);
    var high = 'going';
    high = high.replace(/\W/g, '');
    var str = high.split(" ");
    var text = $(this).text();
    text = text.replace(str, "<span style='color: blue'>"+str+"</span>");
    $(this).html(text);
});

Below is the code I used to replace some text, with colored text. It's simple, took the text and replace it within an HTML tag. It works for each words in that class tags.

$('.hightlight').each(function(){
    //highlight_words('going', this);
    var high = 'going';
    high = high.replace(/\W/g, '');
    var str = high.split(" ");
    var text = $(this).text();
    text = text.replace(str, "<span style='color: blue'>"+str+"</span>");
    $(this).html(text);
});

回复收藏 0 原文

不一样的天空 2024-10-26 07:33:32

var string ='my string'
var new_string = string.replace('string','new string');
alert(string);
alert(new_string);

var string ='my string'
var new_string = string.replace('string','new string');
alert(string);
alert(new_string);

回复收藏 0 原文

水波映月 2024-10-26 07:33:32

$('textarea').bind('input', function() {
  var c = this.selectionStart,
      r = /[^a-z0-9 .]/gi,
      v = $(this).val();
  if(r.test(v)) {
    $(this).val(v.replace(r, ''));
    c--;
  }
  this.setSelectionRange(c, c);
});

$('textarea').bind('input', function() {
  var c = this.selectionStart,
      r = /[^a-z0-9 .]/gi,
      v = $(this).val();
  if(r.test(v)) {
    $(this).val(v.replace(r, ''));
    c--;
  }
  this.setSelectionRange(c, c);
});

回复收藏 0 原文

橪书 2024-10-26 07:33:32

为什么你不向字符串容器添加一个类，然后替换内部文本？就像这个例子一样。

HTML：

<div>
    <div>
        <p>
           <h1>
             <a class="swapText">lollipops</a>
           </h1>
        </p>
        <span class="swapText">lollipops</span>
    </div>
</div>
<p>
   <span class="lollipops">Hello, World!</span>
   <img src="/lollipops.jpg" alt="Cool image" />
</p>

jQuery：

$(document).ready(function() {
    $('.swapText').text("marshmallows");
});

Why you just don't add a class to the string container and then replace the inner text ? Just like in this example.

HTML:

<div>
    <div>
        <p>
           <h1>
             <a class="swapText">lollipops</a>
           </h1>
        </p>
        <span class="swapText">lollipops</span>
    </div>
</div>
<p>
   <span class="lollipops">Hello, World!</span>
   <img src="/lollipops.jpg" alt="Cool image" />
</p>

jQuery:

$(document).ready(function() {
    $('.swapText').text("marshmallows");
});

回复收藏 0 原文

~没有更多了~

关于作者

雪若未夕

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

jQuery 查找和替换字符串

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

留蓝

18790681156

zach7772

Wini

ayeshaaroy

初雪

友情链接

jQuery 查找和替换字符串

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

留蓝

18790681156

zach7772

Wini

ayeshaaroy

初雪

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。