时间戳

首页 > 解决方案 > 使用 replace() 但将 HTML 保留在结果中

javascript - 使用 replace() 但将 HTML 保留在结果中

问题描述

使用 jQuery 如何查找和替换单词但保留 HTML？当我这样做时replace()，它会返回一个去除了 HTML 的字符串。

这是一个例子。我想替换Hello为，Hi但是当我使用此代码时，结果是剥离了所有 HTML。我知道我可以简单地用一个独特的选择器包装文本，但无法编辑 HTML。

(function($) {
  var string = $('.banner-message');

  string.each(function() {
    var replaced = $(this).text().replace(/Hello /, 'Hi ');
    $(this).html(replaced);
  });
})(jQuery);
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

.banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

.banner-message.alt button {
  background: #fff;
  color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="banner-message">
  Hello World
  <button>Change color</button>
</div>
<div class="banner-message">
  Hello World
  <button>Change color</button>
</div>

http://jsfiddle.net/n7L24ue5/

谢谢...

标签： javascriptjqueryregex

解决方案

你做

var replaced = $(this).text().replace(/Hello /, 'Hi ');
-----------------------^^^^

该.text()函数返回内容的文本版本。您需要获取html版本的方法 :)
提示：您已经在同一个片段中找到了您正在寻找的方法

推荐阅读