首页 新闻 搜索 专区 学院

js匹配关键字

1
悬赏园豆:30 [待解决问题]

运用js做到把输入文本框的关键字,在获取文本信息中加亮色标记出来,并加上按钮,点击下一个时,自动获取到下一个关键字上面。比如下面这种效果。这个现在还没有想到怎么写,求问。

 

中新网5月14日电 据新华社新华视点微博消息,14日上午,习近平来到天津人力资源发展促进中心和天津职业技能公共实训中心,了解就业和培训情况。他说,就业是民生之本,也是世界性难题,要从全局高度重视就业问题。没有一定增长不足以支撑就业,解决就业问题,根本要靠发展,把经济发展蛋糕做大,把就业蛋糕做大。习近平在天津和高校毕业生、失业人员等座谈时,问村官杨代显“情商重要还是智商重要?”杨代显回答“都重要”。习近平说,做实际工作情商很重要,更多需要的是做群众工作和解决问题能力,也就是适应社会能力。老话说,万贯家财不如薄技在身,情商当然要与专业知识和技能结合。原标题:习近平:要从全局高度重视就业问题 把蛋糕做大

浪荡De逍遥哥的主页 浪荡De逍遥哥 | 初学一级 | 园豆:62
提问于:2013-05-15 11:13
< >
分享
所有回答(2)
1

用正则吧  替换关键字为 <span class='key-span'>关键字</span>

丫的 | 园豆:1575 (小虾三级) | 2013-05-15 11:25

需要用按钮来做点击下一个,并捕捉到下一个选定的关键字,能不能详细一点

支持(0) 反对(0) 浪荡De逍遥哥 | 园豆:62 (初学一级) | 2013-05-15 12:47

@路边店小二: 你是想点一下匹配一个 那么上一个还需要匹配吗?

支持(0) 反对(0) 丫的 | 园豆:1575 (小虾三级) | 2013-05-15 13:24

@tomcat1988: 在文本框中输入想要匹配的关键字,会把所有的关键字匹配,点击下一个按钮后,会自动获取下一个关键字,其他匹配的关键字,是还在存在的,点击时改变当前的背景色

支持(0) 反对(0) 浪荡De逍遥哥 | 园豆:62 (初学一级) | 2013-05-15 13:39

@路边店小二:

用正则把 替换关键字为 <input type='button' class='key-span' name='keyword' value='关键字' />

 

我习惯用jquery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Common/JQuery/jquery-1.4.1.js"></script>
   
</head>
<body>
    <div id="context">
    中新网5月14日电 据新华社新华视点微博消息,14日上午,习近平来到天津人力资源发展促进中心和天津职业技能公共实训中心,了解就业和培训情况。他说,就业是民生之本,也是世界性难题,要从全局高度重视就业问题。没有一定增长不足以支撑就业,解决就业问题,根本要靠发展,把经济发展蛋糕做大,把就业蛋糕做大。习近平在天津和高校毕业生、失业人员等座谈时,问村官杨代显“情商重要还是智商重要?”杨代显回答“都重要”。习近平说,做实际工作情商很重要,更多需要的是做群众工作和解决问题能力,也就是适应社会能力。老话说,万贯家财不如薄技在身,情商当然要与专业知识和技能结合。原标题:习近平:要从全局高度重视就业问题 把蛋糕做大
        </div>
</body>
</html>
 <script>
     $(function(){
         var reg = /习近平/g
         var target = "<input type='button' class='key-span' name='keyword' value='习近平' />"


         var html = $("#context").html().replace(reg, target)
         $("#context").html(html)
         $(".key-span").live('click', function () {
             var index = $(".key-span").index($(this))

             index++;
             if (index !== $(".key-span").length)
             $(".key-span").eq(index).css({color:"#f00"}).focus();
         })
     })
    </script>
支持(0) 反对(0) 丫的 | 园豆:1575 (小虾三级) | 2013-05-15 15:16

@tomcat1988: 你做的太复杂了,下面的是我参考后的别的做法

 

regshop.js

 

//
// 类 PatternParser
//
//
function PatternParser()
{
 // 分解工具(静态变量)
 if( PatternParser.regex == null )
  PatternParser.regex = new RegExp( "([^\\(\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\])+|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\]|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\]|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\]|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\]|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\]|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\]|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\]|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\]|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\]|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\]|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\]|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\]|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\]|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\]|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\]|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\]|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\]|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\]|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\]|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\]|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\]|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\]|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\]|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\]|\\(([^\\(\\)\\[\\\\]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\])*\\))*\\))*\\))*\\))*\\))*\\))*\\))*\\))*\\))*\\))*\\))*\\))*\\))*\\))*\\))*\\))*\\))*\\))*\\))*\\))*\\))*\\))*\\))*\\))*\\)", "g" );

 // 表达式
 this.pattern = null;

 // 分解结果
 this.result = null;

 // 分解
 this.Parse = PatternParser_Parse;

 // 结果数量
 this.ResultCount = PatternParser_ResultCount;

 // 导出 HTML
 this.ExportHTML = PatternParser_ExportHTML;
 
 // 内部使用
 this.DoSpan = PatternParser_DoSpan;
}

//
// 针对 Windows 98, IE 5 中的 exec
//
//
//
RegExp.prototype.exec2 = function exec2( stxt )
{
    if( parseFloat( navigator.appVersion.substr(navigator.appVersion.search("MSIE") + 4) ) >= 6 ) return this.exec( stxt );

    var _lI = this.lastIndex;
    this.lastIndex = 0;

    var match = null;

    if( _lI < stxt.length )
    {
        match = this.exec( stxt.substr( _lI ) );

        if( match != null )
        {
            match.input      = stxt;
            match.index     += _lI;
            match.lastIndex  = match.index + match[0].length;

            this. lastIndex  = match.lastIndex;
        }
    }

    return match;
}

//
// PatternParser::DoSpan( curr, spans, pos1, pos2, spanid, spancls )
//
function PatternParser_DoSpan( curr, spans, pos1, pos2, spanid, spancls )
{
   while( curr<this.result.length && this.result[curr].index < pos2 )
   {
       if( pos1 < this.result[curr].index )
        spans[spans.length] = formatstr( this.pattern.substring( pos1, this.result[curr].index ) );
 
    spans[spans.length] = spanid + curr + spancls + ">";
    
    pos1 = this.result[curr].lastIndex;
    
    curr = this.DoSpan( curr+1, spans, this.result[curr].index, this.result[curr].lastIndex, spanid, spancls );
    
    spans[spans.length] = "</span>";
   }

   if( pos1 < pos2 )
    spans[spans.length] = formatstr( this.pattern.substring( pos1, pos2 ) );
    
   return curr;
}

//
// PatternParser::ExportHTML( spanid, spancls )
//
function PatternParser_ExportHTML( spanid, spancls )
{
 if( this.pattern == null || this.pattern == "" )
  return "&nbsp;";

 // spanid
 if( spanid != null && spanid != "" )
  spanid = "<span id=" + spanid;
 else
  spanid = "<span id=group";

 // class
 if( spancls != null && spancls != "" )
  spancls = " class=" + spancls;
 else
  spancls = "";

 // do
 var spans = new Array();
 this.DoSpan( 0, spans, 0, this.pattern.length, spanid, spancls );

 return spans.join("");
}

//
// PatternParser::ResultCount( )
//
function PatternParser_ResultCount( )
{
 if( this.result == null )
  return 0;
 else
  return this.result.length;
}

//
// PatternParser::Parse( pat )
//
function PatternParser_Parse( pat )
{
 this.pattern = pat;
 this.result  = new Array( new Object() );

 this.result[0].index = 0;
 this.result[0].lastIndex = pat.length;

 var found = true, count = 1;
 PatternParser.regex.lastIndex = 0;

 while( found )
 {
  var match = PatternParser.regex.exec2( pat );

  if( match != null )
  {
   if( match[0].charAt(0) == '(' && match[0].charAt(1) != '?' )
     {
      this.result[count] = new Object();
      this.result[count].index     = match.index;
      this.result[count].lastIndex = match.lastIndex;

      count ++;

      PatternParser.regex.lastIndex = match.index + 1;
     }
   else if( match[0].charAt(0) == '(' && match[0].charAt(1) == '?' )
   {
    PatternParser.regex.lastIndex = match.index + 3;
   }
   else
   {
    PatternParser.regex.lastIndex = match.lastIndex;
   }
  }
  else
   found = false;
 }
}

//
// 类 MatchShop
//
//
function MatchShop()
{
 // 表达式分析
 this.pparser = new PatternParser();

 // 匹配表达式
 this.re = null;

 // 表达式
 this.pattern = null;
 
 // 忽略大小写
 this.ignorecase = false;
 
 this.multiline = false;
 
 // 匹配结果
 this.matches = null;

 // 文本
 this.text = null;
 
 // 递增类型
 this.deltatype = 0;
 
 // 递增量
 this.delta1  = 0;
 this.delta2s = new Array();
 this.delta2  = null;

 // 匹配到次数
 this.matchTimes = 0;

 // 设定表达式和文本
 this.PatternAndText = MatchShop_PatternAndText;
 
 // 标记为从头匹配
 this.SetFirst = MatchShop_SetFirst;
 
 // 设定忽略大小写
 this.SetIgnorecase = MatchShop_SetIgnorecase;
 
 this.SetMultiline = MatchShop_SetMultiline;
 
 // 匹配
 this.Match = MatchShop_Match;
 
 // 计算递增量
 this.DoDelta = MatchShop_DoDelta;

 // 设定递增量
 this.SetDelta = MatchShop_SetDelta;

 // 返回递增量描述
 this.GetDelta = MatchShop_GetDelta;
 
 // 匹配结果导出
 this.ExportResultHTML = MatchShop_ExportResultHTML;
 
 // 分组结果导出
 this.ExportGroupsHTML = MatchShop_ExportGroupsHTML;
 
 this.GetFlags = MatchShop_GetFlags;
}

//
// MatchShop::ExportGroupsHTML( callbackname, notfound )
//
function MatchShop_ExportGroupsHTML( callbackname, notfound )
{
 // 函数名
 if( callbackname == null )
  callbackname = "javascript:void";

 if( notfound == null )
  notfound = "Not found."

 var radios = new Array();

 radios[0] = "<input type=radio name=__mss id=__msrs0 onclick=\""+callbackname+"(0)\"><label for=__msrs0> $&: " + (this.matches!=null?formatstr(this.matches[0]):notfound) + "</label> <br>\r\n";

 for( i=1; i<this.pparser.ResultCount(); i++ )
 {
  radios[radios.length] = "<input type=radio name=__mss id=__msrs"+i+" onclick=\""+callbackname+"(" + i + ")\"><label for=__msrs"+i+"> $" + i + (this.matches!=null&&this.matches[i]!="" ? ": "+formatstr(this.matches[i]) :"") + "</label> <br>\r\n";
 }

 return radios.join("");
}

//
// 匹配结果导出
//
function MatchShop_ExportResultHTML()
{
 if( this.text == null || this.text == "" )
  return "&nbsp;";

 if( this.matches != null )
  return formatstr( this.text.substring(0, this.matches.index) )
       + "<span style='background-color: #FFFF00'>" + formatstr( this.text.substring(this.matches.index, this.matches.lastIndex) ) + "</span>"
       + formatstr( this.text.substr(this.matches.lastIndex) );
 else
  return formatstr( this.text );
}

//
// MatchShop::GetDelta()
//
function MatchShop_GetDelta()
{
 if( this.deltatype == 0 )
  return "0";

 var desc = new Array();

 if( this.delta2 != null && this.delta2.length > 0 )
 {
  desc[0] = (this.delta2s[0] > 0 ? "" : "- ") + "$" + this.delta2[0];
  
  for(var i=1; i<this.delta2.length; i++)
  {
   desc[i] = (this.delta2s[i] > 0 ? " + " : " - ") + "$" + this.delta2[i];
  }
 }
 
 if( desc.length > 0 )
     desc[desc.length] = (this.delta1 >= 0 ? " + " : " - ") + Math.abs(this.delta1);
    else
     desc[0] = (this.delta1 >= 0 ? "" : "- ") + Math.abs(this.delta1);

 return desc.join("");
}

//
// MatchShop::SetDelta( delta )
//
function MatchShop_SetDelta( delta )
{
 if( delta == null || delta == "" || delta == "0" )
 {
  this.deltatype = 0;
  return;
 }

 if( MatchShop.delta_re == null )
  MatchShop.delta_re = new RegExp("([\\+\\-]?)\\s*(\\$*)\\s*(\\d+)", "g");

 MatchShop.delta_re.lastIndex = 0;

 this.deltatype = 1;
 this.delta1    = 0;
 this.delta2    = new Array();

 var match = MatchShop.delta_re.exec( delta );
 while( match != null )
 {
  var dec = parseInt( match[3] );
  var sig = match[1] != "-" ? 1 : -1;
  var dls = match[2];

  if( dls.length > 0 )
  {
   this.delta2s[this.delta2.length] = sig;
   this.delta2 [this.delta2.length] = dec;
  }
  else
  {
   this.delta1 += sig * dec;
  }

  // 查找下一个
  match = MatchShop.delta_re.exec( delta );
 }
}

//
// MatchShop::DoDelta()
//
function MatchShop_DoDelta()
{
 if( this.deltatype == 0 || this.re == null )
  return;

 if( this.matches == null )
 {
  this.re.lastIndex = 0;
  return;
 }

 var delta = this.delta1;
 if( this.delta2 != null && this.delta2s != null )
 {
  for( var i=0; i<Math.min(this.delta2.length, this.delta2s.length); i++ )
  {
   var grp = this.delta2[i];
   if( grp < this.matches.length )
   {
    var sign = this.delta2s[i] >= 0 ? 1 : -1;
    delta += sign * this.matches[grp].length;
   }
  }
 }

 if( delta <= 0 )
  delta = 1;

 this.re.lastIndex = this.matches.index + delta;
}

//
// MatchShop::Match( bfirst )
//
function MatchShop_Match( bfirst )
{
 if( bfirst != null && bfirst )
  this.SetFirst();

 // 递增
 this.DoDelta();

 // 计数
 if( this.re.lastIndex == 0 )
  this.matchTimes = 0;

 this.matchTimes ++;

 // 匹配
 this.matches = this.re.exec2( this.text );
}

//
// MatchShop::SetIgnorecase( icase )
//
function MatchShop_SetIgnorecase( icase )
{
 if( icase == null )
  this.ignorecase = true;
 else
  this.ignorecase = icase;

 if( this.pattern != null )
  this.re = new RegExp( this.pattern, this.GetFlags() );

 this.SetFirst();
}

function MatchShop_SetMultiline( mline )
{
    if( mline == null )
        this.multiline = true;
    else
        this.multiline = mline;

    if( this.pattern != null )
        this.re = new RegExp( this.pattern, this.GetFlags() );

    this.SetFirst();
}

//
// MatchShop::SetFirst()
//
function MatchShop_SetFirst()
{
 if( this.re != null )
  this.re.lastIndex = 0;

 this.matches = null;
}

//
// MatchShop::PatternAndText( pat, txt )
//
function MatchShop_PatternAndText( pat, txt )
{
    pat = pat.replace( /\r\n?|\n\r?/g, "\n" );
    txt = txt.replace( /\r\n?|\n\r?/g, "\n" );

 if( pat != this.pattern )
 {
  this.pattern = pat;

  this.pparser.Parse( pat );
  this.re = new RegExp( pat, this.GetFlags() );

  this.SetFirst();
 }
 
 if( txt != this.text )
 {
  this.text = txt;
  this.SetFirst();
 }
}

function MatchShop_GetFlags()
{
    var flags = "g";

    if( this.ignorecase )
        flags = "i" + flags;
   
    if( this.multiline )
        flags = flags + "m";
   
    return flags;
}

//
// 可指定替换次数的字符串替换方法
//
//    $$  The literal character '$' 
//    $&  The entire matched string 
//    $`  The substring preceding the matched substring 
//    $'  The substring following the matched substring 
//    $n  The n'th captured submatch 
//    $+  The last matched substring 
//    $_  The entire input string 
//
//
String.prototype.replace2 = function replace2( regexp, replacetxt, dotimes )
{
 // 如果没有第三个参数
 if( dotimes == null || dotimes <= 0 )
  return this.replace( regexp, replacetxt );

 if( replace2.topattern == null )
  replace2.topattern = new RegExp("\\$([$&`'+_]|\\d\\d?)", "g");

 // 按次数匹配
 regexp.global    = true;
 regexp.lastIndex = 0;

 var lastpos = 0, toIndex = 0;
 var result  = new Array();

 for(var i=0; i<dotimes; i++)
 {
  var match = regexp.exec( this );

  // 如果找到
  if( match != null )
  {
   regexp.index = match.index;
   match.lastIndex = match.index + match[0].length;
  }
  else
  {
   regexp.index = null;
   break;
  }

  // 之前部分  
  if( lastpos < match.index )
  {
   var subs = this.substring( lastpos, match.index );
   result[result.length] = subs;

   toIndex += subs.length;
  }

  // 得到各种定义
  var enm = match[0];
  var pre = this.substring( 0, match.index );
  var fol = this.substr( match.lastIndex );
  var lam = match[match.length-1];
  var inp = this;

  // 开始组装替换为字符串
  replace2.topattern.lastIndex = 0;

  var replto = new Array();
  var lastp  = 0;

  var m = replace2.topattern.exec2( replacetxt );
  while( m != null )
  {
   if( lastp < m.index )
    replto[replto.length] = replacetxt.substring( lastp, m.index );

   switch( m[1] )
   {
   case "$":
    replto[replto.length] = "$"; break;

   case "&":
    replto[replto.length] = enm; break;

   case "`":
    replto[replto.length] = pre; break;

   case "'":
    replto[replto.length] = fol; break;

   case "+":
    replto[replto.length] = lam; break;
   
   case "_":
    replto[replto.length] = inp; break;
  
   default:
    {
     var grpnum = m[1];
     while( grpnum >= match.length && grpnum.length > 0 )
      grpnum = grpnum.substring(0, grpnum.length-1);

     var numtxt = m[1].substr(grpnum.length);

     if( grpnum.length > 0 )
     {
      if( grpnum > 0 )
       replto[replto.length] = match[parseInt(grpnum.replace(/^0+/, ""))] + numtxt;
      else
       replto[replto.length] = "$" + grpnum + numtxt;
     }
     else
      replto[replto.length] = "$" + numtxt;

     break;
    }
   }

   lastp = m.lastIndex;

   // 下一个
   m = replace2.topattern.exec2( replacetxt ); 
  }

  if( lastp < replacetxt.length )
   replto[replto.length] = replacetxt.substr( lastp );

  var subs = replto.join("");
  result[result.length] = subs;

  // 反馈匹配到位置
  regexp.toIndex     = toIndex;
  regexp.toLastIndex = toIndex + subs.length;

  toIndex += subs.length;

  // 剩下部分
  lastpos = match.lastIndex;
 }

 if( lastpos < this.length )
  result[result.length] = this.substr( lastpos );

 return result.join("");
}

 

前台页面:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <meta http-equiv="Content-Language" content="zh-cn">
    <script type="text/javascript" language="javascript" src="./正则表达式工作面板 - Regular Expression Workshop_files/common.js"></script>
    <script type="text/javascript" src="./正则表达式工作面板 - Regular Expression Workshop_files/jquery.js"></script>
    <title></title>
    <script language="javascript" src="./正则表达式工作面板 - Regular Expression Workshop_files/regshop.js"></script>
    <script language="javascript">
        var grp = null, shop = new MatchShop(), rto = "", dlt = "";
        shop.SetIgnorecase();
        shop.SetDelta(dlt);
        function Match(bfirst) {
            var tbdiv = document.getElementById("tbdiv");
            var eddiv = document.getElementById("eddiv");
            var tbtxtdiv = document.getElementById("tbtxtdiv");
            var edtxtdiv = document.getElementById("edtxtdiv");
            var rdv = document.getElementById("rdv");
            var edform = document.getElementById("edform");
            var ex_url = document.getElementById("ex_url");
            var other_url = document.getElementById("other_url");

            tbdiv.style.display = '';
            eddiv.style.display = 'none';
            tbtxtdiv.style.display = '';
            edtxtdiv.style.display = 'none';
            rdv.style.display = "";

            shop.PatternAndText(edform.pattern.value, edform.txt.value);
            shop.Match(bfirst);

            tbdiv.innerHTML = shop.pparser.ExportHTML("grp");
            tbtxtdiv.innerHTML = shop.ExportResultHTML();
            rdv.innerHTML = shop.ExportGroupsHTML("ShowGroup", "没找到。");

            rdv.style.height = Math.min(rdv.scrollHeight + 30, 200);

            // 更新链接
            var params = "?pat=" + escape_plus(edform.pattern.value) + "&txt=" + escape_plus(edform.txt.value) + "&dlt=" + escape_plus(dlt)

            ex_url.href = params;
            other_url.href = "replshop.htm" + params + "&rto=" + escape_plus(rto);
        }

        function Edit(ed) {
            var tbdiv = document.getElementById("tbdiv");
            var eddiv = document.getElementById("eddiv");
            var tbtxtdiv = document.getElementById("tbtxtdiv");
            var edtxtdiv = document.getElementById("edtxtdiv");
            var rdv = document.getElementById("rdv");

            tbdiv.style.display = 'none';
            eddiv.style.display = '';
            tbtxtdiv.style.display = 'none';
            edtxtdiv.style.display = '';
            //    rdv     .style.display = 'none';
            rdv.innerHTML = '<p><img src="../images/download.gif" width="16" height="16">  <font size="4"><a href="/download/mtracer/MTracer.zip"></a></font>';
            rdv.style.height = 55;

            ed.focus();
        }

        function SetDelta() {
            var delta = window.showModalDialog("delta.htm", shop.GetDelta(), "dialogWidth:300px;dialogHeight:250px");

            if (delta != null)
                shop.SetDelta(delta);

            ShowDelta();
        }

        function ShowGroup(i) {
            if (grp != null) grp.style.background = "transparent";

            grp = document.getElementById("grp" + i);

            if (grp != null) grp.style.background = "#ffaaff";
        }

        function ShowDelta() {
            var edform = document.getElementById("edform");

            var delta = dlt = shop.GetDelta();
            edform.delta.value = delta == "0" ? "..." : delta;
        }

</script>
</head>
<table border="0" width="100%" cellspacing="0" cellpadding="10" id="table1">
    <tbody>
        <tr>
            <td>
                <form id="edform" name="edform">
                <table cellspacing="0" cellpadding="0">
                    <tbody>
                        <tr>
                            <td valign="top">
                                <p>
                                    表达式:</p>
                            </td>
                            <td>
                                <table  width="500" cellspacing="0" style="border-collapse: collapse" cellpadding="0">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <div id="eddiv" style="display: none;">
                                                    <!--<textarea id="pattern" name="pattern" cols="50" class="ed" style="min-height: 30px;
                                                        height: 2px;"  rows="1"></textarea>-->
                                                    <input id="pattern" name="pattern" class="ed" type="text" />
                                                </div>
                                                <div id="tbdiv" onclick="Edit(edform.pattern)" class="show" style="">
                                                    <span id="grp0">习近平</span></div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td valign="top" colspan="2" height="10">
                                <img border="0" src="./正则表达式工作面板 - Regular Expression Workshop_files/spacer.gif"
                                    width="1" height="1">
                            </td>
                        </tr>
                        <tr>
                            <td valign="top">
                                <p>
                                    文本:</p>
                            </td>
                            <td>
                                <table  width="500" cellspacing="0" style="border-collapse: collapse" cellpadding="0">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <div id="edtxtdiv" style="display: none;">
                                                    <input id="txt" name="txt" class="ed" style="min-height: 50px; height: 2px;"
                                                         type="text" />

                                                    <!--<textarea id="txt" name="txt" cols="50" class="ed" style="min-height: 50px; height: 2px;"
                                                        onpropertychange="this.style.posHeight=this.scrollHeight+2" rows="1"></textarea>-->
                                                </div>
                                                &nbsp;<div id="tbtxtdiv" onclick="Edit(edform.txt)" class="show" style="height: 100px;">
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" height="10">
                                <img border="0" src="./正则表达式工作面板 - Regular Expression Workshop_files/spacer.gif"
                                    width="1" height="1" alt="" />
                            </td>
                        </tr>
                    </tbody>
                </table>
                <input type="button" value="匹配下一个" onclick="Match(false)" />&nbsp;&nbsp;&nbsp;
                <input type="button" value="匹配第一个" onclick="Match(true)" />
                <br />
                <br />
                <div id="rdv" style="overflow: auto; height: 85px;" class="show">
                    <input type="radio" name="__mss" id="__msrs0" onclick="ShowGroup(0)" /><label for="__msrs0" />
                    <br />
                </div>
                </form>
            </td>
        </tr>
    </tbody>
</table>
<script language="javascript">
    $(function () {
        $("#pattern").val('');
        $("#txt").val('');
        rto = '';
        $("#replto").val('');
        dlt = '';
        shop.SetDelta(dlt);
        var url = location.href;
        var pos = url.indexOf('?');
        if (pos >= 0) {
            url = url.substring(pos + 1);
            var ps = url.split(/&/g);
            for (var i = 0; i < ps.length; i++) {
                var p = ps[i];
                pos = p.indexOf('=');
                if (pos > 0) {
                    var k = p.substring(0, pos), v = unescape_plus(p.substring(pos + 1));
                    if (k == 'pat') { pat = v; $("#pattern").val(v); }
                    else if (k == 'txt') { txt = v; $("#txt").val(v); }
                    else if (k == 'rto') { rto = v; $("#replto").val(v); }
                    else if (k == 'dlt') { dlt = v; }
                }
            }
        }
        Match(true);
    });
</script>
</html>

但是现在遇到一个问题,如果所匹配的文章很长,我想做当匹配的关键字达到浏览器的下拉滚动条下面后,能跟着下拉条到指定的位置。

支持(0) 反对(0) 浪荡De逍遥哥 | 园豆:62 (初学一级) | 2013-05-15 16:38

@tomcat1988: 最好用锚点的方法去实现,但是如果索引的文本过多,锚点这样实现起来好像会出现问题,还未测试

支持(0) 反对(0) 浪荡De逍遥哥 | 园豆:62 (初学一级) | 2013-05-15 16:49
0

http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

Yu | 园豆:12944 (专家六级) | 2013-05-15 12:41

不想用插件来实现

支持(0) 反对(0) 浪荡De逍遥哥 | 园豆:62 (初学一级) | 2013-05-15 12:47

@路边店小二: jquery.js 也不用?

支持(0) 反对(0) Yu | 园豆:12944 (专家六级) | 2013-05-15 13:06

@Yu:  要用到jquery.js

支持(0) 反对(0) 浪荡De逍遥哥 | 园豆:62 (初学一级) | 2013-05-15 13:39
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册