lanmaster53/tag-replace.js

## tag-replace.js
// define global variables to pass data between textarea and select elements
var currentEl = null;
var currentTag = null;

// dynamically create a select box to populate with options
$("body").append($("<select></select>").attr("id", "template-select").attr("style", "position: absolute; display: none;"))

function getCaretPosition(el) {
    var start, end;
    if (el.setSelectionRange) {
        start = el.selectionStart;
        end = el.selectionEnd;
    } else if (document.selection && document.selection.createRange) {
        var range = document.selection.createRange();
        start = 0 - range.duplicate().moveStart('character', -100000);
        end = start + range.text.length;
    }
    return {
        start: start,
        end: end
    }
}

$("#template-select").change(function() {
    if ($(this).find(':selected').data('ignore') === false) {
        var oldVal = currentEl.val();
        var newVal = oldVal.replace(currentTag, $(this).val());
        currentEl.val(newVal);
        currentEl = null;
        currentTag = null;
        $(this).fadeOut();
        $(this).empty();
    }
})

$("textarea").click(function(e) {
    var select = $("#template-select");
    if (select.is(':visible')) {
        select.fadeOut();
        select.empty();
    } else {
        var caret = getCaretPosition(this);
        var result = /\S+$/.exec(this.value.slice(0, this.value.indexOf(' ',caret.end)));
        var word = result ? result[0] : null;
        if (word.slice(0, 1) === "{" && word.slice(-1) === "}") {
            word = word.slice(1, -1);
            if (word in replacements) {
                select.append($('<option/>').html("Select a " + word).data('ignore', true))
                for (var i = 0; i < replacements[word].length; i++) {
                    select.append($('<option/>').html(replacements[word][i]).data('ignore', false))
                }
                select.css({
                    'left': e.pageX - select.width()/2,
                    'top': e.pageY - select.height()/2
                });
                currentTag = "{" + word + "}";
                currentEl = $(this);
                select.fadeIn();
            }
        }
    }
});

## test.html
<!DOCTYPE HTML>
<html>
<head>
    <title>Test</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

textarea {
  width: 300px;
  height: 150px;
}

    </style>
</head>
<body>
    <textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco {CLIENT} nisi ut aliquip ex ea commodo consequat. Duis aute {APP} dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
    <script>

var replacements = {
    APP: ["cheetah biscuits", "john's test app", "nvisium.com"],
    CLIENT: ["anyone", "someone", "yo momma"]
};

    </script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="tag-replace.js"></script>
</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>Test</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>

	textarea {
	width: 300px;
	height: 150px;
	}

	</style>
	</head>
	<body>
	<textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco {CLIENT} nisi ut aliquip ex ea commodo consequat. Duis aute {APP} dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
	<script>

	var replacements = {
	APP: ["cheetah biscuits", "john's test app", "nvisium.com"],
	CLIENT: ["anyone", "someone", "yo momma"]
	};

	</script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="tag-replace.js"></script>
	</body>
	</html>