Whenever you are using
component.set("v.myString",customLongString);
it will literally print whats there in the variable customLongString. It will assume it to be a string and will not parse the string.
Hence the HTML was displaying in the UI.
As a work around look at the below code
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<!-- If your String is static. Try String Interpolation-->
<p>This is from static</p>
hello <a onclick="{!c.sayHello}" name="{!v.testList[1].strValue}">{!v.testList[1].strValue}</a> Chander
<!-- If your Stirng is dynamic - Build the list similar to the one in doInit method and loop through -->
<p>This is from dynamic</p>
<aura:iteration items="{!v.testList}" var="item">
<aura:if isTrue="{!item.isOnclickEnabled}">
<a href="javascript:void(0)" onclick="{!c.sayHello}" name="{!item.strValue}">{!item.strValue}</a>
<aura:set attribute="else">
<span>{!item.strValue} </span>
</aura:set>
</aura:if>
</aura:iteration>
In the controller build your dynamic testList and generate a string of your requirement. Onclick you will know which string you clicked and process it in the controller
({
sayHello : function(cmp, event, helper) {
var stringClicked = event.srcElement.name;
alert(stringClicked);
},
doInit : function(cmp, event, helper){
var testList = [
{strValue : 'hello', isOnclickEnabled : false},
{strValue : 'Mohan', isOnclickEnabled : true},
{strValue : 'Chander', isOnclickEnabled : false}
];
cmp.set("v.testList", testList);
}
})
