如何添加文本到JavaScript的結尾？

Question

我正在嘗試創建一個按鈕，它將在上面的段落中將文本添加到URL的末尾，以便它可以將文本發送到緩衝區。我正在使用JavaScript填充一個段落。這裏是我使用的代碼：

<script> 
function facebook10Post() { 
    var x,address,city,state,zip,beds,baths,sqft,gla,listDate,listPrice,listUrl,team,word1,word2,word3,word4,feature1,feature2,feature3,feature4; 
    x = document.getElementById("propertyInfo"); 
    address = x.elements["address"].value; 
    city = x.elements["city"].value; 
    state = x.elements["state"].value; 
    zip = x.elements["zip"].value; 
    beds = x.elements["beds"].value; 
    baths = x.elements["baths"].value; 
    sqft = x.elements["sqft"].value; 
    gla = x.elements["gla"].value; 
    listDate = x.elements["listDate"].value; 
    listPrice = x.elements["listPrice"].value; 
    listUrl = x.elements["listUrl"].value; 
    team = x.elements["team"].value; 
    word1 = x.elements["word1"].value; 
    word2 = x.elements["word2"].value; 
    word3 = x.elements["word3"].value; 
    word4 = x.elements["word4"].value; 
    feature1 = x.elements["feature1"].value; 
    feature2 = x.elements["feature2"].value; 
    feature3 = x.elements["feature3"].value; 
    feature4 = x.elements["feature4"].value; 
    link1 = document.getElementById("facebook10Post1").value; 
    document.getElementById("facebook10Post1").innerHTML = "NEW LISTING!<br>" + "Check out " + team + " " + word1 + " new listing at " + address + "! This " + word2 + " home features " + beds + " beds, " + baths + " baths and " + sqft + " sq ft!<br>" + "For more details & pictures, visit " + listUrl; 

<h3>General Property Information</h3> 
Address: <input type="text" name="address"><br> 
City: <input type="text" name="city"><br> 
State: <input type="text" name="state"><br> 
Zipcode: <input type="text" name="zip"> 

<h3>Rooms, Size, Etc.</h3> 
Number of Bedrooms: <input type="Number" name="beds"><br> 
Number of Bathrooms: <input type="Number" name="baths"><br> 
Total Sq Ft: <input type="Number" name="sqft"><br> 
GLA: <input type="Number" name="gla"> 

<h3>Listing Information</h3> 
Listing Date: <input type="Date" name="listDate"><br> 
Listing Price: <input type="Number" name="listPrice"><br> 
Listing URL: <input type="url" name="listUrl"><br> 
Team(our) or Solo(my)? <input type="text" name="team"><br> 

<h3>Features</h3> 
Feature #1: <input type="text" name="feature1"><br> 
Feature #2: <input type="text" name="feature2"><br> 
Feature #3: <input type="text" name="feature3"><br> 
Feature #4: <input type="text" name="feature4"><br> 

<h3>Descriptive Words</h3> 
Descriptive Word #1: <input type="text" name="word1"><br> 
Descriptive Word #2: <input type="text" name="word2"><br> 
Descriptive Word #3: <input type="text" name="word3"><br> 
Descriptive Word #4: <input type="text" name="word4"><br> 

<input type="button" value="Create Posts" onclick="facebook10Post()"> 

<p id="facebook10Post1"></p> 
<button>This is where the button should go</button> 

我知道，我把它發送到需要的URL是 「https://buffer.com/add?text=」 但我需要以某種方式將填入「facebook10Post1」的段落添加到該網址的末尾。

的什麼可能出現在「facebook10Post1」款將是一個例子：

全新上市！ 查看我在1234大街的現代新房源！這個更新的家庭擁有5張牀，4個浴室和2500平方英尺！ 欲瞭解更多詳情&圖片，請訪問http://www.myrealestatesite.com/main-street

任何想法？

Answer 1

這是一個有用的實用功能，可以將查詢字符串參數添加到網址。

/** 
* Adds a query string parameter in the provided url. 
* Update parameter if it already exists. 
* Does nothing if value is null or undefined. 
* 
* @param {string} url to modify. 
* @param {string} key of query parameter. 
* @param {string} value of query parameter. 
* 
* @returns {string} modified url. 
*/ 
function addQueryStringParameter(url, key, value) { 
    if (value === null || value === undefined) { 
     return url; 
    } 

    value = encodeURIComponent(value); 

    var re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i'), 
     separator = url.indexOf('?') !== -1 ? '&' : '?'; 
    if (url.match(re)) { 
     return url.replace(re, '$1' + key + '=' + value + '$2'); 
    } else { 
     return url + separator + key + '=' + value; 
    } 
}; 

下面介紹如何使用它。

獲取段落

var paragraphValue = document.getElementById("facebook10Post1").innerHTML; 

的價值構建URL

var url = 'https://buffer.com/add'; 
url = addQueryStringParameter(url, 'text', paragraphValue); 

這個問題有更強大的功能添加查詢字符串參數一些很好的例子：How can I add or update a query string parameter? 感謝@Alexei Levenkov發佈此鏈接。