个人中心
gpt4 book ai didi

javascript - jQuery : Replace all unformatted text outside of html tags with multiple dropdown boxes

转载 作者：行者123 更新时间：2023-12-03 06:04:12 25 4
gpt4 key购买 nike

我希望在字符串中找到子字符串(从数组中)，然后将其替换为标题等于子字符串的下拉框。

该字符串来自用户输入，子字符串是从我的工作代码中的数据库中提取的。

我根据 DavidTonarini 在这个问题中给出的答案进行了工作:Javascript: replace() all but only outside html tags

但是，这仅排除“<”和“<”之间包含的文本。

我也使用了 jconder 对这个问题的回答。这已经部分解决了问题。

如果您在包含的工作 fiddle 中输入:“alevelsalevel”，那么您将看到“alevels”作为下拉框返回，但“alevel”作为纯文本返回，但它应该与数组中的条目匹配并替换为下拉框。在用户输入中重复相同的字符串时也会出现问题。我希望能够在用户输入中多次匹配相同的子字符串。

var data = {
  "a_levels": {
    "a_level": {
      id: 1,
      units: 2,
      created: "2016-10-04 19:00:05",
      updated: "2016-10-05 09:37:46"
    },
    "a_levels": {
      id: 2,
      units: 2,
      created: "2016-10-05 08:19:27",
      updated: "2016-10-05 09:37:39"
    }
  },
  "a_level": {
    "a_level": {
      id: 1,
      units: 2,
      created: "2016-10-04 19:00:05",
      updated: "2016-10-05 09:37:46"
    },
    "a_levels": {
      id: 2,
      units: 2,
      created: "2016-10-05 08:19:27",
      updated: "2016-10-05 09:37:39"
    }
  }
};
var input, // Create empty variables.
  response;

$('#submit').click(function() {
  input = $('#userInput').val();
  response = input;
  // CREATE DROPDOWN BOXES.
  var strings_used = [];
  $.each(data, function(i, v) { // Iterate over first level of output.

    for (var itr = 0; itr < strings_used.length; ++itr) {
      if (strings_used[itr].indexOf(i) !== -1) {
        return true;
      }
    }
    var searchWord = i.replace(/_/g, " "); // Replace underscores in matches with blank spaces.
    var regEx = new RegExp("(" + searchWord + ")(?!([^<]+)?>)", "gi"); // Create regular expression which searches only for matches found outside html tags.
    var tmp = response.replace(regEx, "<span class='btn-group'><button class='btn btn-primary dropdown-toggle' type='button' data-toggle='dropdown'>" + searchWord + "<span class='caret'></span></button><ul class='" + i + " dropdown-menu'></ul></span>"); // Replace matching substrings with dropdown boxes.
    if (tmp !== response) { // Check if replacement is complete.
      response = tmp; // Update response.
      strings_used.push(i);
    }
  });
  $('#template').empty().append(response); // Populate template container with completed question response including dropdown boxes.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

  <div id="searchbox">
    <div class="input-group">
      <input id="userInput" type="text" class="form-control" placeholder="type here...">
      <span id="submit" class="input-group-btn">
			  <button class="btn btn-default" type="submit">GO!</button>
			</span>
    </div>
  </div>

  <div class="row">
    <div id="template" class="col-sm-10 col-md-offset-1 text-left"></div>
  </div>

</body>

最佳答案

如果我现在理解正确的话，您希望它在第一次替换后停止遍历字典。在这种情况下，这应该有效:

var output = ['the_car_was_found_abandoned_in_a_nearby_town', 'found_abandoned'];
var template = 'the car was found abandoned in a nearby town';

$.each(output, function(i,v){
  var searchWord = v.replace(/_/g, " ");
  var regEx = new RegExp("("+searchWord+")(?!([^<]+)?>)", "gi");

  var tmp = template.replace(regEx, "<span class='btn-group'><button class='btn btn-primary dropdown-toggle' type='button' data-toggle='dropdown'>"+searchWord+"<span class='caret'></span></button><ul id='"+i+"' class='dropdown-menu'></ul></span>");
  if (tmp !== template) {
    template = tmp;
    console.log(template);
    return false;
  }
});

通过检查正则表达式是否修改了字符串，您可以检测是否进行了替换，然后通过从 $.each() 回调中 返回 false;可以提前结束迭代。

虽然我不确定这是否是整个图片，但如果您只想跳过字典中的其他条目，这些条目是更长、更合适的匹配的子字符串，那么您需要以方式略有不同，例如:

var dict = {
    "the_car_was_found_abandoned_in_a_nearby_town":
      ["the_car_was_found_abandoned_in_a_nearby_town", "found_abandoned"],
    "some_other_text_that_isn't_a_substring_of_another_entry:
      ["some_other_text_that_isn't_a_substring_of_another_entry", "of_another_entry", "some_other"]
};

如果您以这种方式订购字典，那么您可以像这样运行上述算法:

var dict = {
    "the_car_was_found_abandoned_in_a_nearby_town":
      ["the_car_was_found_abandoned_in_a_nearby_town", "found_abandoned"],
    "some_other_text_that_isn't_a_substring_of_another_entry:
      ["some_other_text_that_isn't_a_substring_of_another_entry", "of_another_entry", "some_other"]
};
var template = 'the car was found abandoned in a nearby town with some other junk';

Object.keys(dict).forEach(function(d) {
  $.each(dict[d], function(i,v) {
    var searchWord = v.replace(/_/g, " ");
    var regEx = new RegExp("("+searchWord+")(?!([^<]+)?>)", "gi");

    var tmp = template.replace(regEx, "<span class='btn-group'><button class='btn btn-primary dropdown-toggle' type='button' data-toggle='dropdown'>"+searchWord+"<span class='caret'></span></button><ul id='"+i+"' class='dropdown-menu'></ul></span>");
    if (tmp !== template) {
      template = tmp;
      console.log(template);
      return false;
    }
  });
});

以上将输出:

"<span class='btn-group'><button class='btn btn-primary dropdown-toggle' type='button' data-toggle='dropdown'>the car was found abandoned in a nearby town<span class='caret'></span></button><ul id='0' class='dropdown-menu'></ul></span> with some other junk"
"<span class='btn-group'><button class='btn btn-primary dropdown-toggle' type='button' data-toggle='dropdown'>the car was found abandoned in a nearby town<span class='caret'></span></button><ul id='0' class='dropdown-menu'></ul></span> with <span class='btn-group'><button class='btn btn-primary dropdown-toggle' type='button' data-toggle='dropdown'>some other<span class='caret'></span></button><ul id='2' class='dropdown-menu'></ul></span> junk"

另一种不需要预先排序字典输入的方法是维护已使用输入的列表，并检查剩余输入是否不是已使用输入的子字符串，应该具有相同的最终效果:

var output = ['the_car_was_found_abandoned_in_a_nearby_town', 'found_abandoned'];
var template = 'the car was found abandoned in a nearby town';

var strings_used = [];

$.each(output, function(i,v){
  for (var itr = 0; itr < strings_used.length; ++itr) {
    if (strings_used[itr].idnexOf(v) !== -1) {
      return true;
    }
  }
  var searchWord = v.replace(/_/g, " ");
  var regEx = new RegExp("("+searchWord+")(?!([^<]+)?>)", "gi");

  var tmp = template.replace(regEx, "<span class='btn-group'><button class='btn btn-primary dropdown-toggle' type='button' data-toggle='dropdown'>"+searchWord+"<span class='caret'></span></button><ul id='"+i+"' class='dropdown-menu'></ul></span>");
  if (tmp !== template) {
    strings_used.push(v);
    template = tmp;
    console.log(template);
  }
});

关于javascript - jQuery : Replace all unformatted text outside of html tags with multiple dropdown boxes，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39625769/

25 4 0
文章推荐： javascript - 从 React fetch 获取数据
文章推荐： javascript - D3 - 如何更新树布局中的隐藏分支
文章推荐： javascript - 使用 Angular 按下按钮会导致 v2.show 不是函数错误
文章推荐： JavaScript 在不透明度转换完成之前更改图像
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com