Question

由于我不太精通js，所以我提前为一个可能不必要的问题道歉，但与js一样，请将纯文本重写为漂亮的url。

所以这：你好世界

对此：你好世界

然后将重写的表单插入到表单输入中

<div class="form-group">
        <label for="title">Nadpis</label>
        <input type="text" name="title" id="title" class="form-control" value="{{ old('title') }}" required minlength="3" maxlength="80" onblur="this.form.url.value=this.value"/>
    </div>

    <div class="form-group">
        <label for="url">URL</label>
        <input type="text" name="url" id="url" class="form-control" value="{{ old('url') }}" required minlength="3" maxlength="80" readonly/>
    </div>

Answer 1

添加事件监听器
根据需要在加载时执行
删除内联事件处理程序
在URIEncoding之前执行替换

更改encodeURIComponent(this.value.replace(/ /g, "-")) 如果您只想替换，请转到this.value.replace(/ /g, "-")

另外，如果结果是实际的URL，我们可以在结果上使用新的URL（）和URL SearchParams

//const re1 = /[\;\,\/\?\:\@\&\=\+\$\_\.!\~\*\'\(\)\#]/g
const re2 = /[^a-zA-Z0-9 ]/g

window.addEventListener("load", function() { // on page load
  const title = document.getElementById("title"); // store the field
  title.addEventListener("input", function() { // on any input 
    document.getElementById("url").value = encodeURIComponent(
      // this.value.replace(/ /g, "-").replace(re1,"") // left out the "-"
      this.value.replace(re2,"").replace(/ /g, "-") // using re 2
    ); // encode after replace
  });
  title.dispatchEvent(new Event('input')); // trigger the change
});

<div class="form-group">
  <label for="title">Nadpis</label>
  <input type="text" name="title" id="title" class="form-control" value="Hello world;,/?:@&=+$_.!~*'()#" required minlength="3" maxlength="80" />
</div>

<div class="form-group">
  <label for="url">URL</label>
  <input type="text" name="url" id="url" class="form-control" value="What is the old URL?" required minlength="3" maxlength="80" readonly/>
</div>

Answer 2

您可以使用以下替换代码来格式化您的“漂亮网址”：

var prettyUrl = oldUrl.split(' ').join('-');

Answer 3

如果我了解您的问题，希望这段代码对您有帮助

function prettyUrl(value)
{
  return value.replace(/ /g, "-").replace(/@/g, "").replace(/\$/g, "").replace(/!/g, "").replace(/#/g, "").toLowerCase();
}

<form>
  <div class="form-group">
    <label for="title">Nadpis</label>
    <input type="text" name="title" id="title" class="form-control" required minlength="3" maxlength="80" onblur="this.form.url.value=prettyUrl(this.value)" />
  </div>

  <div class="form-group">
    <label for="url">URL</label>
    <input type="text" name="url" id="url" class="form-control" required minlength="3" maxlength="80" readonly/>
  </div>
</form>

已更新 用Nothing替换特殊字符，并将所有字母都小写

js格式的字符串到漂亮的URL

3 个答案: