使用 js 或 jquery 替换 div 的特定文本消息答案

【问题标题】：Replace particular text message of a div using js or jquery使用 js 或 jquery 替换 div 的特定文本消息
【发布时间】：2014-06-25 07:32:57
【问题描述】：

我需要替换文本“Form+validation+failed.+You+cannot+submit+this+record.”在<div class="alert alert-error"> 中显示“您没有资格进行此购买。”

<div class="alert alert-error">
<button class="close" data-dismiss="alert">×</button>
Form+validation+failed.+You+cannot+submit+this+record.
</div>

它是一个动态代码，我只想替换那个文本而不是那个类中的其他文本，因为错误文本会根据页面的行为而有所不同。有什么办法我只能找到这个字符串“Form+validation+失败。+你+不能+提交+这个+记录。”并使用 jquery 或 java 脚本将其替换为自定义文本消息。

【问题讨论】：

你需要将你的错误信息包装在一个类中，你可以使用 $('.alert .error-message').html()
如果您无法包装错误消息..要替换的字符串是否始终相同？
它的动态代码我不能添加类ID或任何东西...我需要先找到字符串
@user2787474 动态代码是什么意思。哪一部分？我假设像“Form+validation+failed..”这样的错误消息是动态的。所以即使是动态的，你也可以创建一个 holder div 类来显示这些动态消息。
@user2787474 你的 HTML 不整洁。在将“动态文本”发送到此页面之前，您应该考虑将其包装在 span 中。这样，您将拥有特定的标签，使用这些标签将更容易在 jQuery 中进行选择。无论如何，因为你坚持，你可以像我给in my answer那样使用一个肮脏的把戏。我重申，您应该考虑发送包裹在 span 中的字符串。

标签： javascript jquery innerhtml str-replace

【解决方案1】：

您可以使用getElementsByClassName 获取所有alert alert-error 类。然后，您可以遍历 getElementsByClassName 返回的 HTMLCollection。使用replace更新消息，见下图：

window.onload = function() {
  var errors = document.getElementsByClassName("alert alert-error")
  for (var i = 0; i < errors.length; i++) {
    var div = errors.item(i)
    div.innerHTML = div.innerHTML.replace("Form+validation+failed.+You+cannot+submit+this+record.", "User Authentication failed.")

  }
}

<div class="alert alert-error">
  <button class="close" data-dismiss="alert">×</button>
  Form+validation+failed.+You+cannot+submit+this+record.
</div>

【讨论】：

它的动态代码我不能添加类ID或任何东西...我需要先找到字符串
我收到此错误 SyntaxError: missing ; before语句...validation+failed.+You+cannot+submit+this+record.":"用户认证失败。
我的代码

【解决方案2】：

这是一件肮脏的事情，但这可以满足您的需求。

$('div[class="alert alert-error"]:contains("Form+validation+failed.+You+cannot+submit+this+record.")')
    .html('<button class="close" data-dismiss="alert">×</button>You are not eligible to make this purchase.');

提示：如果您认为不会与其他 DOM 元素冲突，您也可以简单地使用 $(.alert-error:contains("Form+validation+failed.+You+cannot+submit+this+record.")) 选择您的 div

代码将首先选择<div class="alert alert-error"> 并检查给定的内容。如果找到匹配项，它将用.html() 中传递的任何内容替换所选div 中的完整HTML。现在，您必须传递文本旁边按钮的 HTML，因为没有办法（我不知道）在 div 中只选择您想要的字符串。如果字符串在包装器中，使用.replace() 选择和替换它会更容易和更好。

FIDDLE

您可能应该看一下提供此“动态内容”的代码。在将“动态内容”传递到此处之前，您可以轻松地在“动态内容”周围添加类似 <span id="dynamic"></span> 的包装器。如果你能做到这一点，你可以轻松地做类似的事情

$('#dynamic:contains("Form+validation+failed.+You+cannot+submit+this+record.")').text('You are not eligible to make this purchase.');

FIDDLE

【讨论】：

【解决方案3】：

如果您使用span 标签包装您的文本，那么您可以轻松完成替换。试试看：

<div class="alert alert-error">
<button class="close" data-dismiss="alert">×</button>
<span id="text_to_replace">Form+validation+failed.+You+cannot+submit+this+record.</span>
</div>

要将现有文本替换为新文本，您应该使用：

$('#text_to_replace').html('You are not eligible to make this purchase.');

【讨论】：

它的动态代码我不能添加类ID或任何东西...我需要先找到字符串
虽然是动态的，但此文本会以某种方式添加到您的文档中，因此您需要做的是在添加它的代码中的文本周围放置一个 span 标签！
如果我将在该文本之前添加任何跨度或 div，它将被添加到每个错误消息中......那么如果该字符串存在，有什么办法可以替换。

【解决方案4】：

在 span 或其他控件中呈现您的警报。

因为将文本放在 div 中是编程的床练习。

这里正在工作Fiddle。

检查 Fiddle 你会得到答案。

$( ".close" ).click(function() {
  $(".message").html("Your Alert Message");
});

【讨论】：