Javascript 检测文本区域和输入中的链接_Javascript_Html_Angularjs

Javascript 检测文本区域和输入中的链接

javascript html angularjs

Javascript 检测文本区域和输入中的链接,javascript,html,angularjs,Javascript,Html,Angularjs,我想允许用户在textarea或input中放置超链接，并使用AngularJS、JavaScript: <div class="col-md-12 form-group"> <div class="col-md-9"> <textarea id="obs" class="sigma-form-simple-search-input large-size" rows="5" ng-model="commandeHdr.obs"

我想允许用户在

textarea

或

input

中放置超链接，并使用AngularJS、JavaScript:

<div class="col-md-12 form-group">
  <div class="col-md-9">
    <textarea id="obs" class="sigma-form-simple-search-input large-size" rows="5"
              ng-model="commandeHdr.obs" ng-change="hasChanges.parameter=true"/>
  </div>
</div>

我用这个简单的技术为您完成了这项工作，我将创建一个空Div，然后用链接填充它，该链接是由一个文本区域生成的，每个“文本链接”用分号分隔

我唯一没有为你做的就是应用一些CSS将我们的链接样式设置为文本，我相信你可以做到，这是一项简单的任务

像这个test1.com；test2.com；test3.com，在本例中，我们有3个网站，但它们处于文本模式，以下是我为您所做的：

<div id="container" class="col-md-12 form-group">
  <div id="navi" class="col-md-9">
    <textarea id="obs" class="sigma-form-simple-search-input large-size" 
              rows="5" ng-model="commandeHdr.obs"
              ng-change="hasChanges.parameter=true" cols="100" rows="10">
        test1.com;test2.com;test3.com
    </textarea>

    <div id="links">
    </div>

  </div>
</div>


test1.com；test2.com；test3.com

这是我完成这项任务的Javascript

<script>
    // get your textarea
    var ts = document.getElementById("obs");
    // get our empty div
    var linksDiv = document.getElementById("links");
    // remove any empty space
    var urls = ts.value.trim();
    // split our links by ;
    var urlsArr = urls.split(';');
    // get back all new item in original posision, index 3 will be in 1 so I will revese they array...
    urlsArr.reverse();
    //Cleaned from space....
    ts.value = urlsArr;
    // our links will be hold here
    var links = '';
    // for all links we will add
    // ID if you need
    // Class so we can posision all links by CSS
    for (var i in urlsArr) {
        links = "<a class='genlinks' id = '"+i+"' href="+urlsArr[i]+">"+urlsArr[i]+";</a>" + links;
    }
    // now update our div
    linksDiv.innerHTML = links;
</script>


//获取您的文本区域
var ts=document.getElementById（“obs”）；
//拿我们的空沙发
var linksDiv=document.getElementById（“链接”）；
//清除任何空白
var url=ts.value.trim（）；
//将我们的链接拆分为；
var urlsArr=url.split（“；”）；
//取回所有新项目在原来的位置，索引3将在1，所以我将展示他们的数组。。。
urlsArr.reverse（）；
//从太空中清理。。。。
ts.value=urlsArr；
//我们的链接将保留在这里
var链接=“”；
//对于所有链接，我们将添加
//如果你需要的话，请出示身份证
//类，以便我们可以通过CSS定位所有链接
用于（urlsArr中的变量i）{
links=“”+链接；
}
//现在更新我们的div
linksDiv.innerHTML=链接；

你需要的一个简单的CSS是

<style>
    #container {
        width: 100px;
        height: 100px;
        position: relative;
    }
    #links {
        width: 100%;
        height: 100%;
        position: absolute;
        top:3px;
        left: 18px;
    }
    #links {
        z-index: 5;
    }
</style>


#容器{
宽度：100px；
高度：100px；
位置：相对位置；
}
#链接{
宽度：100%；
身高：100%；
位置：绝对位置；
顶部：3px；
左：18px；
}
#链接{
z指数：5；
}

如果你的问题没有解决，请告诉我。快乐编码

这是我使用的整个HTML文件

<html>  
<head>
 <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>awatitwork</title>

    <style>
        #container {
            width: 100px;
            height: 100px;
            position: relative;
        }
        #links {
            width: 100%;
            height: 100%;
            position: absolute;
            top:3px;
            left: 18px;
        }
        #links {
            z-index: 5;
        }
    </style>
</head>

<body>
<div id="container" class="col-md-12 form-group">
  <div id="navi" class="col-md-9">
    <textarea id="obs" class="sigma-form-simple-search-input large-size" rows="5" ng-model="commandeHdr.obs" ng-change="hasChanges.parameter=true" cols="100" rows="10">
        test1.com;test2.com;test3.com
    </textarea>

    <div id="links">
    </div>

    </div>
</div>

<script>
    // get your textarea
    var ts = document.getElementById("obs");
    // get our empty div
    var linksDiv = document.getElementById("links");
    // remove any empty space
    var urls = ts.value.trim();
    // split our links by ;
    var urlsArr = urls.split(';');
    // get back all new item in original posision, index 3 will be in 1 so I will revese they array...
    urlsArr.reverse();
    //Cleaned from space....
    ts.value = urlsArr;
    // our links will be hold here
    var links = '';
    // for all links we will add
    // ID if you need
    // Class so we can posision all links by CSS
    for (var i in urlsArr) {
        links = "<a class='genlinks' id = '"+i+"' href="+urlsArr[i]+">"+urlsArr[i]+";</a>" + links;
    }
    // now update our div
    linksDiv.innerHTML = links;
</script>

    <!-- Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>


觉醒
#容器{
宽度：100px；
高度：100px；
位置：相对位置；
}
#链接{
宽度：100%；
身高：100%；
位置：绝对位置；
顶部：3px；
左：18px；
}
#链接{
z指数：5；
}
test1.com；test2.com；test3.com
//获取您的文本区域
var ts=document.getElementById（“obs”）；
//拿我们的空沙发
var linksDiv=document.getElementById（“链接”）；
//清除任何空白
var url=ts.value.trim（）；
//将我们的链接拆分为；
var urlsArr=url.split（“；”）；
//取回所有新项目在原来的位置，索引3将在1，所以我将展示他们的数组。。。
urlsArr.reverse（）；
//从太空中清理。。。。
ts.value=urlsArr；
//我们的链接将保留在这里
var链接=“”；
//对于所有链接，我们将添加
//如果你需要的话，请出示身份证
//类，以便我们可以通过CSS定位所有链接
用于（urlsArr中的变量i）{
links=“”+链接；
}
//现在更新我们的div
linksDiv.innerHTML=链接；