使用 jQuery 在文本区域内匹配和突出显示标签/单词(更改颜色和字体粗细)

2024-02-14

I've textarea当我添加时我就开始输入tags我在数组中定义,所以根据我的情况应该说in array但这是说not in array这是我的示例代码

$(document).ready(function() {
  var tagsArray = new Array("{full_name}", "{email}", "{company}", "{reg_no}", "{address}", "{city}", "{mobile}", "{rec1_full_name}", "{rec1_email}", "{rec2_full_name}", "{rec2_email}");
  var txtArea = $("textarea#txtarea").val();
  $(document).on("keyup", "#txtarea", function() {
    if ($.inArray(txtArea, tagsArray) != -1) {
      console.log("in array");
    } else {
      console.log("not in array");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="txtarea" name="txtarea" rows="10" cols="50"></textarea>

我刚刚开始输入这段文字This is not what we want {email} {rec1_full_name}虽然我的电子邮件标签是在文本区域中输入的,但它显示的是消息not in array那么如何在打字期间匹配我的标签以及匹配标签后我必须将其颜色更改为蓝色并将字体更改为粗体。


我有一个解决方案给你。希望这会有所帮助。

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

<textarea id="txtarea" name="txtarea" rows="10" cols="50"></textarea>
<button id="submitBtn">Submit</button>
<div id="displayContainer"></div>

<style type="text/css">
  .bold-blue{
    color: blue;
    font-weight: bold;
  }
</style>
<script src="https://code.jquery.com/jquery-3.2.1.js"
        integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
        crossorigin="anonymous"></script>

<script type="text/javascript">
  function inArray(needle, haystack) {
    var length = haystack.length;
    for(var i = 0; i < length; i++) {
        if(haystack[i] == needle) return true;
    }
    return false;
}

$(document).ready(function() {
    var tagsArray = new Array("{full_name}", "{email}", "{company}", "{reg_no}", "{address}", "{city}", "{mobile}", "{rec1_full_name}", "{rec1_email}", "{rec2_full_name}", "{rec2_email}");

   $("#txtarea").on('keyup', function(e) {

      var tags = $("#txtarea").val().match("{(.*)}");

   //check whether the entered tag is valid
      for (tag in tags){
         if(!inArray(tags[tag], tagsArray)){
            if(tags[tag][0] == "{" && tags[tag][tags[tag].length-1] == "}"){
               //alert the user that he entered an invalid tag
               alert(tags[tag]+" is not a valid tag.");
            }
         }
      }
    });
   //render the tags blue and bold
     $("#submitBtn").on("click", function(){
      var tags = $("#txtarea").val().match("{(.*)}");
        var text = $("#txtarea").val();
        for (tag in tags){
          if(tags[tag][0] == "{" && tags[tag][tags[tag].length-1] == "}"){
           var newText = text.replace( tags[tag], '<span class="bold-blue">'+tags[tag]+'</span>');
          }
        }
        $("#displayContainer").html( newText );

     });

});
</script>
</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 jQuery 在文本区域内匹配和突出显示标签/单词(更改颜色和字体粗细) 的相关文章

  • IntersectionObserver是否支持水平滚动观察?

    我制作了几个垂直滚动 IntersectionObserver 模块 但我对水平滚动感兴趣 根将是 div 观察目标将是 img 我想观察当 img 放大但 div 保持视口宽度时的变化 我什至不确定移动 Safari 是否会将缩放后的图片
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • 为什么 setTimeout 在 Chrome 中触发两次,而在 IE 或 Firefox 中则不然?

    有人能告诉我为什么 javascript 函数 生成新号码 在 Chrome 中触发两次 但在 IE 或 Firefox 中则不会 使用 Chrome 20 0 1132 57 IE9 和 Firefox 13
  • ReactTransitionGroup 不适用于 React-redux 连接组件

    我正在开发一个更大的项目 但我创建了这个简短的示例来说明问题 如果我使用Box组件 它的工作原理 它在控制台中输出componentWillEnter and componentWillLeave当我们点击按钮时 如果我使用BoxConta
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • React Router v4 不渲染组件

    React Router v4 渲染组件存在问题 在应用程序初始加载时 它将呈现与 URL 相对应的正确组件 但是 任何后续的组件Link单击不会呈现所需的组件 图书馆 反应路由器 4 2 2 https reacttraining com
  • 计算三次贝塞尔曲线的弧长、曲线长度。为什么不工作?

    我正在用这个算法计算弧长 三次贝塞尔曲线的长度 function getArcLength path var STEPS 1000 gt precision var t 1 STEPS var aX 0 var aY 0 var bX 0
  • onclick 事件中未调用函数

    我想在每个 YouTube 链接的末尾添加一些 HTML 以在 litebox 中打开播放器 到目前为止 这是我的代码 document ready function var valid url new RegExp youtube com
  • mongodb 聚合 - 累积字段的不同组值

    如果我有Player表格文件 name String score Int 我有Group文档 其中组代表玩家列表 groupName String players ObjectID 玩家可以属于多个组 我想做一个聚合Player文档 按以下
  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显
  • 为什么我的交互式图像仅在 Internet Explorer 上出现故障?

    我的问题 我为自己制作了一个图像地图 交互式图像 它在 Chrome safari 和 Firefox 上完美运行 然而 当我在可怕的互联网浏览器上尝试它时 它真的很糟糕 这些小点应该扩展到更大的盒子中 在互联网浏览器上它要么不起作用 要么
  • 具有 100% 高度行和 Internet Explorer 9 的表格

    我有以下示例 div style height 150px background color AAAAFF div
  • LeafleteachLayer函数不会迭代所有Layer

    使用 GeoJSON 数据数组创建一些标记 getJSON GetLocationsServlet function data L geoJSON data onEachFeature onEachFeature addTo mymap G
  • JavaScript eval("{}") 返回行为?

    根据ECMA 262 规范 http www ecma international org publications files ECMA ST Ecma 262 pdf 以下语句返回1 eval 1 eval 1 eval 1 var a
  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用
  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小
  • 从 PHP 数组生成 HTML 表

    我不明白这一点 我需要解决看似简单的问题 但这超出了我的逻辑 我需要编写一个函数 table columns input cols 它将输出一个表 示例 input array apple orange monkey potato chee
  • 在 iOS 7 Safari 中,如何区分通过边缘滑动与后退/前进按钮的 popstate 事件?

    在 iOS 7 Safari 中 现在有两种后退 前进导航方式 使用底部的传统后退 前进按钮箭头或从屏幕边缘滑动 我正在使用动画在 ajax 应用程序中的页面之间进行转换 但如果用户通过边缘滑动进行导航 我不想触发该转换 因为这本身就是一个
  • 滚动顶部不符合预期

    Note 由于上次忘记奖励而重新开放赏金 A Woff 大师已经给出答案 我想在用户展开某一行时到达该行 这样当最后一个可见行展开时 用户不必向下滚动即可查看内容 I used example tbody on click td green

随机推荐

  • 绘制可翻转的矩形

    我得到了代码http support microsoft com kb 314945 http support microsoft com kb 314945绘制一个可翻转 橡皮筋矩形 我向其中添加了代码 这样当我离开鼠标左键时 也会在图像
  • 四舍五入到最接近的好数字

    我正在编写一个应用程序 需要将标签舍入到最接近的 好 数字 我将在下面放置一些代码来演示这一点 但我的问题是我使用了一系列 else if 来查找这个数字 但我无法确定上限 因此这并不是一个好的策略 是否有任何已知的算法或资源可以帮助我 i
  • 使用 Telerik radtreecontrol MVVM 绑定双击方法

    我已经花了很长一段时间来研究这个问题 尽管我内心深处的人说 不要这样做 但现在是时候问路了 我正在使用 MVVM 设计模式在 WPF C 中进行编码 我们尝试严格遵守该模式 并且在后面的代码中不放置任何内容 除非没有选择或者这样做完全不合理
  • 反引号运算符的固定性?

    反引号运算符的固定性是什么 例如在这段代码中现实世界哈斯克尔 http book realworldhaskell org read code case study parsing a binary data format html ghc
  • Django Rest 框架和 Django-Hvad

    所以我需要为我的 DRF API 提供一些模型翻译支持 然后我开始使用 django hvad 它似乎与我的 django 应用程序配合良好 但我在使用 DRF APi 时遇到了一些问题 我正在尝试创建一个简单的 POST 请求 但收到错误
  • R:按数字而不是按字典顺序对 dcast 输出中的列重新排序

    这是关于对包含数字和文本的列名称进行排序 我有一个数据框 其结果是dcast有 200 行 我的订购有问题 列名称采用以下格式 names DF lt c Testname1 1 Testname1 100 Testname1 11 Tes
  • Guvnor规则编码

    我在 Excel 中有一个 Drools 决策表 规则中使用的一些字符串具有 字符 当我从这个决策表在 Guvnor 中构建规则包时 我在规则源中得到了错误的字符 例如 在电子表格中 gt rea de Lazer POR 在内置的 drl
  • 暂停 SpriteKit 游戏 - UIApplicationWillResignActive 与 UIApplicationDidBecomeActive?

    我理解这两种方法之间的差异 但我想知道在执行诸如暂停 SpriteKit 游戏之类的操作时 使用 UIApplicationWillResignActive 与 UIApplicationDidBecomeActive 或 UIApplic
  • 无法使用 ngx translate/core 获取文本的动态翻译 - Angular 2 TypeScript

    问题 我有来自 Json 文件的动态文本 我正在使用这样的translate get 方法 this translate get keyInJson subscribe res gt this valueFromJson res creat
  • 在go中读取xz文件

    我怎样才能阅读xz http en wikipedia org wiki Xzgo 程序中的文件 当我尝试使用它们来阅读它们时lzma https code google com p lzma 我得到一个error in lzma head
  • 三元运算符使用哪种编码风格? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何从Python字符串中删除括号?

    我从标题中知道您可能会认为这是重复的 但事实并非如此 for id row in enumerate rows columns row findall td teamName columns 0 find a text Lag played
  • 如何在 Visual Studio 中的 CppUnitTestFramework (C++) 中设置超时?

    如何使用 CppUnitTestFramework 在 Microsoft 单元测试中为 C 中的测试方法添加超时 我在网上找到的大多数解决方案都是针对 CSharp 项目的 我可以在其中添加 TEST METHOD TIME OUT 80
  • Gettext/Django 德语翻译:正式/非正式称呼

    我维护一个包含翻译的可插入 Django 应用程序 Python 和 HTML 代码中的所有字符串都是用英语编写的 当将字符串翻译成德语时 我总是与德语区分正式和非正式言语的问题作斗争 请参阅T V 区别 https en wikipedi
  • PyQt:计时器无法从另一个线程启动

    我正在使用 python 制作 Qt GUI 但收到错误 QObject startTimer 无法从另一个线程启动计时器 当我运行 readModemSnap 方法时会发生这种情况 我已经为此工作了近一周 尝试了许多不同的 Qt 线程设计
  • 在 javascript 中执行 php 脚本?

    我试图在用户离开我的网站时运行一个快速的 php 脚本 并将一个变量从我的 javascript 传递到 php 但我不太确定如何包含 php 文件并向其传递一个 var 但它实际上并没有运行 php 脚本 有任何想法吗 javascrip
  • 如何进入 Docker 容器的 shell?

    我正在开始使用 Docker 我正在使用 WordPress 基础镜像和 docker compose 我正在尝试 ssh 进入其中一个容器来检查在初始构建期间创建的文件 目录 我试着跑docker compose run containe
  • 如何在node.js中请求一个类

    我的代码有效 var express require express app express class bar constructor this user name null this user surname null this use
  • 为什么 SOAP 消息必须通过 HTTP 发送?

    下面是一个演示 SOAP 请求消息 HTTP 1 1 200 OK Content Type text xml charset utf 8 Content Length nnnn
  • 使用 jQuery 在文本区域内匹配和突出显示标签/单词(更改颜色和字体粗细)

    I ve textarea当我添加时我就开始输入tags我在数组中定义 所以根据我的情况应该说in array但这是说not in array这是我的示例代码 document ready function var tagsArray ne