javascript - 搜索输入字段中的所有单词,然后替换 div 标签中所有匹配的单词
问题描述
$('#srctxt div').each(function() {
var dari = $('#box').val();
var text = $(this).text();
$(this).html(text.replace(dari, '<b>'+dari+'</b>'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form method="POST">
<input type="text" id="box" value="love"> // working
<input type="text" id="box" value="love girl"> // not working
<div id="srctxt">
<div>i love you</div>
<div>love girl</div>
<div>not love</div>
<div>love love love</div>
</div>
</form>
我正在通过将输入单词的每个匹配单词与搜索结果加粗来开发搜索站点。
如果只输入了一个单词,比如 word love
,那么这个脚本就可以很好地工作。但是如果使用两个或更多的词,那么这个脚本就不能正常工作。
例如单词love girl
,然后结果上的粗体仅代表一行。但它都包含爱这个词,所以这对我来说是个问题。
对不起,如果我的英语有点难以理解。但是,我正在寻求有关此 jQuery 代码修复的建议。谢谢...
解决方案
您可以使用正则表达式轻松完成此操作
以下是步骤:
步骤1。拆分input value
以制作array of input words
.
第2步。遍历所有div
要执行搜索/替换条件的
步骤 3。对于每个word in input array
创建一个searchregexp
并替换如果找到
if ($('#box').val().length !== 0) {
var dari = $('#box').val().split(' ');
$('#srctxt div').each(function() {
dari.map(item => {
var regex = new RegExp('(' + item + ')(?!>|b>)', 'gi');
$(this).html($(this).html().replace(regex, "<b>$1</b>"));
});
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="box" value="love girl b">
<div id="srctxt">
<div>i love you</div>
<div>love girl</div>
<div>not love</div>
<div>love love love</div>
</div>
我还删除了具有相同 id 的重复输入字段,因为它是无效的 html。
推荐阅读
- c# - CS 0102: 类型“ ”已包含“ ”的定义
- ios - 如何将数据转换为 AVAsset?
- data-visualization - 如何可视化数据的流入和流出
- python - 当 SQLAlchemy 引发 ProgrammingError 时保留中止的事务
- python - 具有 2 个组件的 pca 输出 1 个功能
- r - 从 R 对象中删除不必要和重复的模式并更改为标准时间格式
- python - 使用 win32com.shell (python) 复制 iphone 文件
- dart - Dart AOT 是如何工作的?
- kubernetes - 我可以使用从 pod 中的 init 容器创建的配置映射吗
- datastax-enterprise - 使用 DSE 高级复制与手动多 DC 设置进行灾难恢复之间的区别?