getIndexesInTextarea(计算字符串在TextArea中的索引)

最新推荐文章于 2022-04-27 11:36:31 发布
原创 最新推荐文章于 2022-04-27 11:36:31 发布 · 703 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种使用JavaScript实现的在文本区域中查找特定字符串的所有出现位置的方法，并返回这些位置的起始和结束索引。通过创建文本范围并利用findText方法，可以有效地在长文本中进行搜索。

<!--在result中显示str在ta中的索引-->

<html>
 <head>
  <script type="text/javascript">
  <!--
   function displayResult(){
    document.getElementById('result').innerText='';
    if(document.getElementById('str').value=='')return;
    var indexes=getIndexesInTextarea(document.getElementById('ta'),document.getElementById('str').value);
    for(var i=0;i<indexes.length;i++){
     document.getElementById('result').innerText=document.getElementById('result').innerText+'['+indexes[i][0]+","+indexes[i][1]+"]";
    }
   }
   function getIndexesInTextarea(ta,str){
    var indexes=new Array();
    var start=0;
    var end=0;
    var taRange=ta.createTextRange();
    var strRanges=findTextRange(taRange,str);
    
    for(var i=0;i<strRanges.length;i++){
     taRange.moveToElementText(ta); 
     for(start=0;taRange.compareEndPoints("StartToStart",strRanges[i])<0;start++){
      taRange.moveStart('character', 1);
     }
     for(var j=0;j<=start;j++){
      if(ta.value.charAt(j)=='/n'){
       start++;
      }
     }
     taRange.moveToElementText(ta); 
     for(end=0;taRange.compareEndPoints('StartToEnd', strRanges[i])<0;end++){
      taRange.moveStart('character', 1);
     }
     for(var j=0;j<=end;j++){
      if(ta.value.charAt(j)=='/n'){
       end++;
      }
     }
     indexes.push([start,end]);
    }
    return indexes;
   }
   function findTextRange(range,str){
    var ranges=new Array();
      var dup=range.duplicate();
      do{
        var d=dup.duplicate();
        if(d.findText(str)){
         ranges.push(d);
         dup.setEndPoint('StartToEnd',d);
         continue;
        };
        break;
      }while(true)
      return ranges;
    }
  //-->
  </script>
 </head>
 <body scroll="true" style="padding-top:20%;padding-left:20%;">
  <textarea id="ta" rows="20" style="width:60%;display:block;"></textarea>
  <input id="str" type="text"/>
  <input type="button" value="index" onclick="displayResult();"/>
  <div id="result" style="position:absolute;top:150%;left:30%;width:40%;height:10%;border:1px groove orange;"></div>
 </body>
</html>

在 Input 和 Textarea 光标处添加字符串
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-06 1802
例如，在聊天应用中，我们可能会在用户键入 “@” 符号时触发自动完成建议，这时候需要确保插入的文本不会破坏现有的输入流。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。为了在光标位置插入文本，我们需要获取光标的位置，然后根据该位置分割原始文本，插入新文本，最后重新拼接文本。对于富文本编辑器来说，插入格式化的文本时，我们可能需要考虑如何保持光标位置不变，或者如何处理嵌套的标签。在文本输入框中，插入点指的是用户光标所在的位置。专栏系列（点击解锁）
把textarea中字符串里含有的回车换行替换成&lt;br&gt;的javascript代码
10-30
在进行Web开发时，对textarea元素中的字符串进行处理是一种常见的需求。textarea元素允许用户输入多行文本，用户输入的内容中常包含回车换行。有时为了满足特定的展示需求，需要在前端将这些换行符替换为HTML的换行...
vue 字符串模板 textarea中插入文字标签
xuhang139的博客
04-27 5125
<template> <div> <el-form label-width="80px"> <el-form-item label="内容"> <el-input ref="smsInput" type="textarea" :rows="4" v-model="smsContent" placeholder="请输入内容"
java后台 拼接字符串在前端textarea怎么实现换行
liangweihao的博客
09-27 1751
java后台 拼接字符串在前端textarea怎么实现换行
vue 怎么在字符串中指定位置插入字符_vue在光标的位置插入内容
weixin_39607090的博客
12-20 1849
一，在textarea中加入idtype="textarea"id="textarea":autosize="{ minRows: 5, maxRows: 10}":placeholder="$t('common_input')"v-model="messageTemplate.content"/>二、在methods中写入方法async insertVariable(value) {con...
vue 字符串索引变量_vue给v-model动态绑定变量的问题
weixin_28717807的博客
02-22 1891
先说下需求，领导想做一个问卷调查的页面为了可以重复使用需要动态根据后台的数据动态判断当前位置该使用input、textarea、复选框、还是单选框，后台的数据结构大概是这样的(下面是我自己模拟的)data: [{label:'姓名',type:'text',max: 50,required:'true'},{label:'电话',type:'phone',max: 50,required:'tru...
如何在textarea中显示html代码,在textarea文本域中显示HTML代码的方法
weixin_39901685的博客
06-07 2446
这是一个iframe 的给你一个参考的：tryit.document.designMode="On";tryit.document.open();tryit.document.innerHTML+=tryit.document.write("asdf");tryit.document.close();tryit.focus();这个是textareaclickfunction insert(){v...
在textarea里显示html文本,尝试在textarea控件中显示HTML文本(示例代码)
weixin_31916045的博客
06-19 2707
我创建了一个textArea元素，但无法显示我的HTML内容。如果我只显示常规文本，或者如果我将textArea元素更改为RichEditableText元素，它可以正常工作。由于这是针对移动应用程序，我更喜欢使用Adobe推荐的textArea元素。这是textArea的MXML代码。我得到的只是边框，没有显示任何内容。Version: 1.0.0.1任何帮助，将不胜感激。干杯，答案border...
Vue项目上绑定变量与字符串拼接-案例
JackieDYH的博客
04-18 5857
示例 <a-textarea :rows="6" style="width: 80%" placeholder="一次最多输入60行，多个换行输入" v-model="form.address_group" /> <span style="float: right; color: #999" >{{ this.row }}/{{ limit }}</span > </a-form-model-item> placeholder="一
freemarker在textarea中正确显示换行
DownThreeLan的专栏
05-05 4465
${str?replace("\\n","\n")!}
把textarea中字符串里含有的回车换行替换成lt;brgt;的javascript代码
12-10
1楼 textarea.value.replace(/\n/g, “ ”); 2楼 s=textarea.value.replace(/\r\n/g, “ ”); 3楼 按下的时候马上更换 V ID=”a” contentEditable=”true” style=’border:1 solid black’> 其实...
在textarea中显示html页面的javascript代码
10-30
"在textarea中显示html页面的javascript代码" 在textarea中显示html页面的javascript代码是指在textarea控件中显示html页面的内容，而不是显示html代码本身。这种需求常见于在线编辑器、博客评论区、论坛帖子等应用...
js限制textarea每行输入字符串长度的代码
10-27
在本文中，我们将学习如何使用JavaScript来限制HTML中的textarea元素，使得用户在每行输入时的字符串长度不超过特定的限制。这在某些场景下非常有用，例如当我们需要用户填写格式化的文本，如留言、评论等，并且希望...
JS TextArea字符串长度限制代码集合
10-27
本篇文章提供了一种针对JavaScript环境下TextArea文本域字符串长度限制的方法，并着重解决了一个特定问题：在Internet Explorer（IE）浏览器中，当用户输入日语和全角字符时出现的BUG。 该方法中，提出了一个名为...
(Kriging-NSGA2)克里金模型结合多目标遗传算法求最优因变量及对应的最佳自变量组合研究（Matlab代码实现）
最新发布
12-17
(Kriging_NSGA2)克里金模型结合多目标遗传算法求最优因变量及对应的最佳自变量组合研究（Matlab代码实现）内容概要：本文介绍了克里金模型（Kriging）与多目标遗传算法NSGA-II相结合的方法，用于求解最优因变量及其对应的最佳自变量组合，并提供了完整的Matlab代码实现。该方法首先利用克里金模型构建高精度的代理模型，逼近复杂的非线性系统响应，减少计算成本；随后结合NSGA-II算法进行多目标优化，搜索帕累托前沿解集，从而获得多个最优折衷方案。文中详细阐述了代理模型构建、算法集成流程及参数设置，适用于工程设计、参数反演等复杂优化问题。此外，文档还展示了该方法在SCI一区论文中的复现应用，体现了其科学性与实用性。; 适合人群：具备一定Matlab编程基础，熟悉优化算法和数值建模的研究生、科研人员及工程技术人员，尤其适合从事仿真优化、实验设计、代理模型研究的相关领域工作者。; 使用场景及目标：①解决高计算成本的多目标优化问题，通过代理模型降低仿真次数；②在无法解析求导或函数高度非线性的情况下寻找最优变量组合；③复现SCI高水平论文中的优化方法，提升科研可信度与效率；④应用于工程设计、能源系统调度、智能制造等需参数优化的实际场景。; 阅读建议：建议读者结合提供的Matlab代码逐段理解算法实现过程，重点关注克里金模型的构建步骤与NSGA-II的集成方式，建议自行调整测试函数或实际案例验证算法性能，并配合YALMIP等工具包扩展优化求解能力。
FindAddress 读第三方程序的变量的原理
12-17
读第三方程序的变量的原理 2 https://flyfish.blog.youkuaiyun.com/article/details/155859130
PVE开启直通+CPU硬盘温度显示,风扇转速+一些群辉自用的小脚本
12-17
先展示下效果 https://pan.quark.cn/s/b85190ab5f38 ### pve虚拟机磁盘路径 ### 虚拟机路径 ### LXC路径 ### 无需借助任何软件直接转换openwrt的img文件为虚拟磁盘 ### PVE-LXC容器换源 ### pve显示信息
基于人脸识别的宿舍门禁管理系统的设计与实现源码.zip
12-17
基于人脸识别的宿舍门禁管理系统的设计与实现源码.zip
水下图像处理指标（uicm,uism,uiconm,uiqm）和图像处理指标（psnr,ssim）研究（Matlab代码实现）
12-17
水下图像处理指标（uicm,uism,uiconm,uiqm）和图像处理指标（psnr,ssim）研究（Matlab代码实现）
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值